Simulado Técnico de Vue.js

Q: Quantas questões compõem o simulado de Vue.js?

São 30 questões no total, distribuídas em 10 de nível Iniciante, 10 de Intermediário e 10 de Avançado, embaralhadas a cada rodada.

Q: O simulado é focado em Vue 2 ou Vue 3?

O foco é 100% no Vue 3 moderno, com forte ênfase na Composition API, TypeScript e padrões arquiteturais atuais.

Q: Preciso pagar ou criar conta para praticar?

Não. Todos os simulados do ToolNotch são 100% gratuitos e rodam diretamente no navegador sem necessidade de cadastro.

Question 1

No Vue 3, o que `createApp(App).mount('#app')` faz?

Accepted Answer

Cria uma nova instância isolada de aplicação a partir do componente raiz e a monta no elemento do DOM correspondente ao seletor

Answer

Baixa o runtime do Vue via CDN e o injeta na página

Answer

Compila todos os arquivos `.vue` do projeto em um único bundle

Answer

Registra `App` como um componente global disponível em todos os outros componentes

Question 2

O que `{{ message }}` renderiza dentro de um template Vue?

Accepted Answer

O valor atual da propriedade reativa `message`, renderizado automaticamente sempre que ela mudar

Answer

A string literal "message"

Answer

Uma referência ao nó DOM, não o seu valor

Answer

Renderiza apenas uma vez na montagem e nunca atualiza

Question 3

Qual é a sintaxe abreviada para `v-bind:href="url"`?

Accepted Answer

`:href="url"`

Answer

`@href="url"`

Answer

`#href="url"`

Answer

`.href="url"`

Question 4

Qual é a principal diferença de comportamento entre `v-if` e `v-show`?

Accepted Answer

`v-show` monta e desmonta nós do DOM fisicamente; `v-if` renderiza o nó e alterna o estilo CSS `display: none`

Answer

`v-if` monta e desmonta nós do DOM fisicamente; `v-show` renderiza o nó e alterna o estilo CSS `display: none`

Answer

`v-if` opera exclusivamente em inputs de formulário; `v-show` opera apenas em componentes customizados

Answer

Ambas as diretivas geram o mesmo código no DOM, sendo `v-show` apenas um atalho sintático para o `v-if`

Question 5

Por que o Vue exige (ou recomenda fortemente) uma ligação `:key` em elementos renderizados com `v-for`?

Accepted Answer

Fornece uma identidade estável para o Vue rastrear, reordenar e reutilizar nós do DOM no diffing

Answer

`:key` é puramente estético e só afeta o valor retornado por `element.dataset.key`

Answer

É obrigatório apenas para elementos `<template>`, nunca para tags HTML comuns

Answer

`:key` melhora a performance de rede armazenando em cache a resposta da API desse item

Question 6

O que `ref()` faz na Composition API do Vue 3 e por que seu valor deve ser acessado via `.value` dentro de `<script setup>`?

Accepted Answer

Encapsula o valor em um objeto reativo com getter/setter em `.value`, permitindo rastrear primitivos via Proxy

Answer

Cria uma referência direta a elementos do DOM real, usando `.value` para ler o valor nativo do HTML

Answer

Instancia um snapshot imutável de estado onde `.value` retorna clones profundos para evitar mutações diretas

Answer

Envolve o dado em uma Promise onde `.value` atua como desempacotador de tipos exigido pelo TypeScript

Question 7

Qual é a principal vantagem de uma propriedade `computed` sobre a chamada de um método comum no template?

Accepted Answer

Propriedades computadas armazenam resultado em cache reativo, recalculando apenas quando suas dependências mudam

Answer

Métodos armazenam retorno em cache; propriedades computadas recalculam a cada ciclo de renderização do componente

Answer

Propriedades computadas executam em Web Workers assíncronos; métodos comuns rodam na thread principal do browser

Answer

Não há diferença — métodos no template e propriedades computadas possuem desempenho e ciclo de vida idênticos

Question 8

Como declarar que um componente filho aceita uma prop `title` obrigatória do tipo `String` usando `<script setup>`?

Accepted Answer

`defineProps({ title: { type: String, required: true } })`

Answer

`const props = ref({ title: String })`

Answer

`export const title = String`

Answer

`this.props.title = String`

Question 9

Em um componente filho com `<script setup>`, qual é a forma correta de notificar o componente pai sobre um evento "submit", opcionalmente passando dados (payload)?

Accepted Answer

const emit = defineEmits(['submit']); emit('submit', payload)

Answer

`this.$parent.onSubmit(payload)`

Answer

`window.dispatchEvent(new CustomEvent('submit', payload))`

Answer

`props.onSubmit(payload)`

Question 10

Quais são os três blocos de nível superior que compõem um Single-File Component padrão do Vue (arquivo `.vue`)?

Accepted Answer

`<template>`, `<script>`, `<style>`

Answer

`<head>`, `<body>`, `<footer>`

Answer

`<html>`, `<js>`, `<css>`

Answer

`<render>`, `<data>`, `<methods>`

Question 11

Qual é a principal diferença prática entre `ref({ count: 0 })` e `reactive({ count: 0 })`, e por que reatribuir o objeto inteiro importa?

Accepted Answer

`reactive()` retorna um Proxy que perde reatividade se for reatribuído; `ref()` aceita reatribuição em `.value`

Answer

`ref()` é exclusivo para objetos e arrays; `reactive()` é obrigatório para números, strings e booleanos

Answer

`ref()` faz rastreamento profundo de dependências; `reactive()` é raso e observa apenas chaves de primeiro nível

Answer

`ref()` opera apenas dentro da Options API; `reactive()` é restrito exclusivamente ao `<script setup>`

Question 12

Quando você deve escolher `watch()` em vez de uma propriedade `computed`?

Accepted Answer

Quando é necessário executar um efeito colateral (APIs, DOM, logs) em resposta a mudanças de estado

Answer

`watch` deve ser sempre preferido — `computed` é uma API legada do Vue 2

Answer

São intercambiáveis em todos os casos, sem diferença prática

Answer

`watch` é obrigatório sempre que mais de uma dependência reativa estiver envolvida

Question 13

Como `watchEffect(fn)` decide quais fontes reativas rastrear, em comparação com `watch(source, fn)`?

Accepted Answer

Rastreia automaticamente todas as propriedades lidas de forma síncrona no callback, dispensando array de dependências

Answer

Exige a passagem de um array explícito de dependências reativas, exatamente igual ao `useEffect` da biblioteca React

Answer

Nunca executa novamente após a montagem inicial — roda apenas uma vez no ciclo de vida e depois se desconecta

Answer

Rastreia estritamente variáveis criadas com `ref()`, ignorando alterações feitas em objetos criados com `reactive()`

Question 14

Qual é a principal diferença estrutural entre a Options API e a Composition API no Vue 3?

Accepted Answer

Options API organiza código por tipo de opção (data, methods); Composition API agrupa por funcionalidade com composables

Answer

Options API tem melhor desempenho em runtime; Composition API compila bundles de JavaScript maiores em produção

Answer

Options API foi descontinuada no Vue 3 e gera erros de compilação a menos que o modo compatibilidade seja ativado

Answer

Options API permite compartilhar estado entre telas; Composition API restringe o estado ao escopo de um só componente

Question 15

Qual problema o `provide()`/`inject()` resolve que props comuns não resolvem de forma limpa?

Accepted Answer

Transmite dados e métodos de um ancestral para descendentes profundos sem necessidade de prop drilling intermediário

Answer

Substitui o Pinia em toda a aplicação sincronizando estado entre componentes irmãos sem precisar de ancestral comum

Answer

Permite que componentes filhos alterem o estado dos pais diretamente sem emitir eventos ou acionar hooks reativos

Answer

Funciona estritamente entre um componente e seus filhos diretos, impondo validação de tipos TypeScript em runtime

Question 16

Qual é a diferença entre um slot padrão (default) e um slot nomeado (named slot) em um componente Vue?

Accepted Answer

O slot padrão recebe conteúdo não direcionado, enquanto slots nomeados criam pontos de injeção via <template #nome>

Answer

Não há diferença — slots nomeados são apenas uma sintaxe alternativa para o mesmo mecanismo sem alteração de comportamento

Answer

Slots nomeados aceitam apenas texto estático, nunca conteúdo reativo dinâmico

Answer

Um componente pode ter apenas um slot no total — ou padrão ou nomeado, nunca ambos

Question 17

Na Composition API, qual hook executa após o componente ter sido montado e seus elementos do DOM estarem acessíveis, sendo o local adequado para inicializar bibliotecas DOM de terceiros?

Accepted Answer

`onMounted`

Answer

`onBeforeMount`

Answer

`onCreated`

Answer

`onUpdated`

Question 18

O que um componente precisa fazer internamente para suportar a ligação `v-model` a partir do seu pai (ex.: `<CustomInput v-model="text" />`)?

Accepted Answer

Aceitar a prop modelValue e emitir o evento update:modelValue quando o valor mudar

Answer

Nada — `v-model` funciona automaticamente em qualquer componente sem nenhuma configuração

Answer

Importar um composable especial `useVModel()` do Vue Router

Answer

Declarar o componente com `defineModel: true` em suas opções

Question 19

Qual problema o componente nativo `<Teleport>` resolve?

Accepted Answer

Renderiza a marcação em outro nó do DOM físico mantendo o escopo reativo e a hierarquia lógica do componente

Answer

Carrega bundles de scripts de componentes sob demanda no momento em que entram na área visível da viewport

Answer

Coordena a reconciliação de hidratação no SSR entre o HTML gerado no Node.js e a árvore do Virtual DOM cliente

Answer

Provê animações de transição de rota ao navegar entre páginas em Single Page Applications com o Vue Router

Question 20

O que o encapsulamento de um componente dinâmico em `<KeepAlive>` realiza?

Accepted Answer

Armazena instâncias inativas em cache na memória sem destruí-las, preservando seu estado ao alternar de volta

Answer

Mantém componentes permanentemente montados no DOM real, alternando sua visibilidade visual via `display: none`

Answer

Grava o estado reativo no `localStorage` do navegador para resistir a recarregamentos de página e reinícios

Answer

Impede que componentes filhos sejam renderizados novamente quando o pai atualiza, funcionando como React.memo

Question 21

Em nível mecânico, como o sistema de reatividade do Vue 3 detecta que um componente precisa ser renderizado novamente quando uma propriedade reativa muda?

Accepted Answer

Um daemon no event loop compara snapshots JSON dos dados a cada 16 milissegundos para detectar diferenças no estado

Answer

Traps get/set no Proxy registram effects ativos na leitura, reexecutando renderizações apenas nas propriedades alteradas

Answer

Toda mutação dispara diretamente a fila de atualização do DOM do navegador de forma síncrona, ignorando o Virtual DOM

Answer

O compilador TypeScript converte variáveis reativas em instâncias EventEmitter que emitem eventos para toda a tela

Question 22

O que diferencia um composable bem projetado no Vue (ex.: `useMouse()`) de uma função utilitária comum?

Accepted Answer

Uma função que usa primitivas da Composition API para encapsular e retornar lógica reativa com estado

Answer

Composables precisam ser baseados em classes usando o padrão `extends Composable`

Answer

Composables só podem ser chamados uma única vez por aplicação, similar a um singleton

Answer

Composables devem sempre retornar uma Promise, pois representam operações assíncronas

Question 23

O que o componente nativo `<Suspense>` coordena no Vue 3?

Accepted Answer

Exibe um fallback enquanto dependências assíncronas filhas são resolvidas, renderizando a árvore final de forma atômica

Answer

Pausa a execução do ciclo de vida dos componentes até que um evento explícito de clique ou gesto do usuário autorize

Answer

Substitui o `<KeepAlive>` ao armazenar instâncias assíncronas em cache de memória para restauração rápida nas rotas

Answer

Executa repetições automáticas com retentativas e backoff exponencial caso componentes assíncronos falhem na rede

Question 24

O que a chamada `h('div', { class: 'box' }, 'Hello')` produz e quando você usaria `h()` em vez de um `<template>`?

Accepted Answer

Retorna um nó de virtual DOM (VNode) para renderização programática quando a sintaxe de template não é flexível o bastante

Answer

Insere um elemento `

` concreto no DOM do navegador de forma síncrona, retornando sua referência HTMLElement

Answer

Funciona como um utilitário interno que executa chamadas `history.pushState()` durante a navegação do Vue Router

Answer

É restrito exclusivamente a arquivos compilados com JSX/TSX, não podendo ser invocado em código TypeScript comum

Question 25

Para que serve uma diretiva customizada no Vue e qual hook você implementaria para executar lógica imediatamente após o elemento vinculado ser inserido no DOM?

Accepted Answer

Encapsulam lógica reutilizável de manipulação direta do DOM; `mounted(el, binding)` executa assim que o elemento entra no DOM

Answer

Servem apenas para adicionar classes CSS dinâmicas aos elementos; `mounted` é o único hook suportado pela API

Answer

Diretivas customizadas foram descontinuadas no Vue 2 e substituídas integralmente por hooks da Composition API no Vue 3

Answer

Aplicam-se exclusivamente a componentes customizados do Vue e geram erro quando declaradas em tags HTML nativas

Question 26

No Vue Router, qual é a diferença entre um guard global `beforeEach` e um guard por rota `beforeEnter`?

Accepted Answer

`beforeEach` roda globalmente a cada navegação; `beforeEnter` dispara apenas ao entrar no registro de rota específico

Answer

`beforeEnter` executa em todas as trocas globais de rota; `beforeEach` roda apenas em rotas específicas configuradas

Answer

`beforeEnter` roda em tempo de build durante o code splitting; `beforeEach` executa no navegador do cliente em runtime

Answer

Ambos os guards compartilham o mesmo escopo, sendo `beforeEnter` apenas um alias descontinuado para `beforeEach`

Question 27

Qual é a principal vantagem das stores do Pinia em relação a compartilhar manualmente um objeto `reactive()` entre componentes como solução caseira de gerenciamento de estado?

Accepted Answer

O Pinia oferece suporte a devtools, instâncias isoladas seguras para SSR por requisição e inferência TypeScript

Answer

Pinia é funcionalmente idêntico a um objeto reativo compartilhado — apenas um wrapper estético

Answer

Stores do Pinia só podem conter valores primitivos, nunca objetos ou arrays

Answer

O Pinia substitui o Vue Router por completo, unificando rotas e estado em uma só API

Question 28

O que `shallowRef()` altera em comparação a um `ref()` comum e quando essa troca vale a pena?

Accepted Answer

Rastreia reatividade apenas na reatribuição de .value, pulando a conversão profunda de propriedades aninhadas

Answer

`shallowRef()` torna o valor imutável e lança erro ao tentar modificá-lo

Answer

`shallowRef()` é sinônimo de `ref()` sem diferença de comportamento, mantido apenas por simetria

Answer

`shallowRef()` só aceita valores primitivos, nunca objetos

Question 29

O que causa o aviso de "hydration mismatch" em uma aplicação Vue renderizada no servidor e por que é perigoso ignorá-lo?

Accepted Answer

O Virtual DOM gerado no cliente difere do HTML gerado pelo servidor, forçando o Vue a descartar o HTML e recriar o DOM

Answer

Representa um aviso inofensivo de CSS em modo de desenvolvimento, sem qualquer impacto em eventos ou dados em produção

Answer

Indica que o Vue Router falhou ao encontrar uma rota correspondente à URL da requisição na tabela de rotas do cliente

Answer

Ocorre exclusivamente quando stores do Pinia falham ao serializar seu estado em tags script durante a renderização no SSR

Question 30

O que são "patch flags" na saída compilada de renderização do Vue 3 e como elas aceleram re-renderizações em comparação com o diff de virtual DOM do Vue 2?

Accepted Answer

Bitmasks numéricas geradas pelo compilador em VNodes dinâmicos, guiando o algoritmo de diff a checar só bindings mutáveis

Answer

Classes CSS especiais injetadas em nós dinâmicos para ativar aceleração por hardware na GPU durante transições

Answer

Tags de checksum criptográfico que validam se os bundles do cliente conferem com os artefatos compilados do servidor

Answer

Ponteiros de memória em runtime que conectam nós do Virtual DOM diretamente às estruturas de layout em C++ do browser

Vue.js Interview Quiz

O que o simulado de Vue.js cobre

Níveis de dificuldade

Tópicos do banco de questões

Como usar o simulado de Vue.js

Perguntas frequentes sobre o simulado de Vue.js

TypeScript

Node.js Fundamentals

System Architecture