Middle Vue Frontend — Perguntas de entrevista Vue

O que é um composable e quando ele vence um mixin?

Uma função que usa a reatividade do Vue e devolve estado e comportamento — useUser, usePagination. Ele vence um mixin porque a origem de cada valor é visível no call site: com mixins dois deles podem definir o mesmo nome e nenhum arquivo te avisa. Composables também se compõem, que é todo o ponto do nome.

Por que destructurar um objeto `reactive` pode quebrá-lo?

Porque a reatividade vive no proxy, e tirar um primitivo dele copia o valor para longe do proxy. O template então renderiza um número que nunca atualiza. toRefs corrige isso convertendo cada propriedade em um ref que mantém o vínculo, e é também por isso que devolver toRefs(state) de um composable é a forma comum.

Como você lida com estado compartilhado sem recorrer a um store?

Um composable com estado a nível de módulo é um store em todo sentido significativo e é suficiente para a maioria das apps. Pinia se justifica quando você precisa de devtools, estado seguro para SSR, ou plugins — e quando várias features escrevem no mesmo estado e você quer esse tráfego em um lugar só. Provide e inject resolvem um problema diferente: passar para baixo de uma árvore sem enfiar props.

O que causa um re-render desnecessário, e como você percebe isso?

Uma dependência que muda mais frequentemente do que a saída — um objeto recriado no render do pai, ou um computed que lê mais estado do que usa. As devtools do Vue destacam componentes enquanto atualizam, o que transforma adivinhação em observação. v-memo existe para o caso raro onde o render em si é genuinamente caro.

Qual é a diferença entre SSR e SSG em termos do Nuxt?

SSR renderiza a cada request, então o conteúdo está atualizado e o servidor faz trabalho por visitante. SSG renderiza em tempo de build e serve arquivos estáticos, o que é mais rápido e barato mas fica obsoleto até o próximo build. A escolha é por rota em vez de por app, e uma página de marketing e um dashboard raramente querem a mesma.

Como você testa um componente Vue de forma sensata?

Renderize-o e faça asserções sobre o que um usuário veria, usando Testing Library ou Vue Test Utils. Teste comportamento — clicar aqui mostra ali — em vez de estado interno, porque estado interno é o que muda com o refactoring. Mocke a rede na camada de request, não os próprios métodos do componente, ou o teste passa enquanto a integração quebra.