Perguntas de entrevista Vue

Qual é a diferença entre ref e reactive? Quando você usa cada um?

ref envolve qualquer valor — incluindo primitivos — em um objeto com uma propriedade .value, enquanto reactive devolve um Proxy e só funciona com objetos. ref sobrevive ao destructuring e à reatribuição, o que reactive não faz: destructurar um objeto reactive produz valores planos que perdem reatividade. A orientação comum é usar ref por padrão e recorrer a reactive só para um grupo de campos estreitamente relacionados.

Como funciona a reatividade no Vue 3? O que o Proxy está fazendo por baixo dos panos?

O Vue 3 envolve o estado em um Proxy que intercepta leituras de propriedade para rastrear quais efeitos dependem delas e escritas de propriedade para disparar esses efeitos. Diferente do Object.defineProperty do Vue 2, um Proxy vê a adição e remoção de propriedades e funciona com arrays e Map, então Vue.set não é mais necessário. O trade-off é que Proxy exige navegadores modernos e que a reatividade se perde no momento em que você destructura para fora do proxy.

Explique a diferença entre computed e watch.

computed deriva um valor de outro estado reativo, faz cache dele, e recalcula só quando uma dependência muda — use sempre que o resultado for um valor que você renderiza. watch executa um efeito colateral em resposta a uma mudança: buscar dados, escrever em storage, disparar uma animação. Se você se pegar atribuindo a outra variável dentro de um watcher, um computed quase sempre é a resposta melhor.

Nomeie os lifecycle hooks no Vue 3.

Na Composition API são onBeforeMount e onMounted, onBeforeUpdate e onUpdated, onBeforeUnmount e onUnmounted, além de onErrorCaptured, onActivated e onDeactivated para componentes cacheados. O próprio setup() substitui beforeCreate e created. onMounted é onde pertence o acesso ao DOM e as assinaturas, e onUnmounted é onde você deve desmontá-las.

O que são slots? Dê um exemplo de um scoped slot.

Um slot é um placeholder em um template filho que o pai preenche com seu próprio markup, o que torna componentes wrapper reutilizáveis. Um scoped slot também passa dados de volta do filho para o conteúdo do slot — por exemplo um componente de lista que cuida do fetching e do loop enquanto deixa o pai decidir como renderizar cada item. Isso inverte o controle: o filho possui o comportamento e o pai possui a apresentação.

Como você passa dados de um componente filho para o pai?

O filho declara eventos com defineEmits e chama emit com um payload, e o pai escuta com v-on. Para binding bidirecional em um único valor, v-model é açúcar sintático sobre uma prop mais um evento de update. Mutar uma prop diretamente não é permitido porque quebra o fluxo de dados unidirecional que torna as mudanças de estado rastreáveis.

O que é Pinia e por que ele é preferido em vez do Vuex?

Pinia é a lib de estado oficial para Vue 3: os stores são funções simples com state, getters e actions, e não há mutations. Ele infere tipos do TypeScript sem anotação manual, suporta stores modulares por padrão em vez de módulos aninhados, e funciona com as APIs Options e Composition. O resultado é menos boilerplate e um suporte de editor muito melhor do que o Vuex.

Qual é a diferença entre v-if e v-show?

v-if adiciona ou remove o elemento do DOM, então custa uma montagem e desmontagem mas evita renderizar qualquer coisa quando é false — correto para conteúdo que raramente muda ou é caro. v-show sempre renderiza o elemento e alterna o display CSS, então alternar é barato mas o componente está sempre construído. Use v-show para algo que alterna com frequência, como um dropdown.