Vue: reatividade declarativa

Você declara o dado e diz onde ele aparece na tela. A partir daí, manter a tela igual ao dado deixa de ser tarefa sua. O contador desta página tem duas linhas de lógica e nenhuma linha de manipulação de DOM.

O que Vue resolve

Em JavaScript puro, toda mudança de dado vira trabalho manual. Você guarda o número numa variável, acha o elemento com querySelector, escreve o valor novo no textContent, e repete isso em cada lugar da página que mostra aquele número. Quando a tela cresce, o código que atualiza fica maior que o código que decide alguma coisa, e o bug mais comum passa a ser um pedaço da tela mostrando um valor velho.

Vue inverte a ordem. Você descreve no template onde o dado aparece, e o framework refaz só a parte da tela que dependia dele. A documentação chama esse mecanismo de rastrear e disparar: no primeiro render o Vue anota quais dados foram lidos, e quando um deles muda ele re-renderiza quem estava rastreando aquele dado.

Os conceitos que você precisa antes da primeira linha

• Componente em arquivo único. Um arquivo .vue guarda template, lógica e estilo do mesmo pedaço de tela. O navegador não abre .vue direto, então existe uma etapa de build no meio. Nos projetos novos quem faz essa etapa é o Vite.
• ref() e .value. ref() embrulha um valor num objeto com a propriedade .value. A documentação explica o porquê do embrulho: a propriedade .value dá ao Vue a chance de detectar quando o valor foi lido ou alterado. No script você escreve contador.value++. No template você escreve {{ contador }}, porque lá o ref se desembrulha sozinho.
• <script setup>. Tudo que você declara no topo desse bloco fica visível para o template do mesmo componente. Sem ele você teria que devolver cada variável e cada função dentro de uma setup(), na mão.
• Diretiva. Atributo que começa com v- e carrega comportamento. v-on (atalho @) liga um evento, v-bind (atalho :) liga um atributo ao dado, e v-model liga os dois lados de um campo de formulário.
• Interpolação. As chaves duplas {{ }} colocam o valor do dado no meio do texto do template. É o ponto onde o Vue anota que aquele trecho da tela depende daquele dado.

O framework por dentro: template, reatividade e componente

O Vue parte do mesmo princípio do React (mude o dado, a tela acompanha), mas escolhe outro caminho pra descrever a interface: um template que É HTML válido, estendido com diretivas. Quem vem do HTML puro costuma se sentir em casa mais rápido aqui.

• Reatividade explícita: um dado que a tela acompanha nasce embrulhado em ref(). No script você lê e escreve contador.value. No template, só contador. Mudou, a tela atualiza.
• Diretivas são atributos com poder: v-if mostra ou esconde, v-for repete um elemento por item de lista, v-model amarra um input a um dado nos dois sentidos, @click escuta evento.
• Componente de arquivo único (SFC): um .vue com três blocos, <script setup>, <template> e <style>. Lógica, estrutura e estilo do mesmo pedaço de interface moram juntos, e props chegam declaradas com defineProps.

<script setup>
import { ref } from "vue";
const tarefas = ref(["estudar Vue"]);   // dado reativo
const nova = ref("");
function add() {
  tarefas.value.push(nova.value);
  nova.value = "";
}
</script>

<template>
  <input v-model="nova" @keyup.enter="add" />
  <ul>
    <li v-for="t in tarefas" :key="t">{{ t }}</li>
  </ul>
</template>

Repare que não tem nenhuma linha manipulando o DOM: o template declara a relação entre dado e tela, e a reatividade sustenta o resto.

Este hello world precisa de Node instalado. É a primeira página desta trilha que pede uma etapa de build, e o motivo está no arquivo .vue do item acima.

1. Confira sua versão do Node:

   node -v

   O projeto gerado declara "node": "^22.18.0 || >=24.12.0" no package.json. Node mais antigo que isso reclama na instalação.

2. Gere o esqueleto do projeto:

   npm create vue@latest ola-vue -- --default

   O --default pula o questionário de roteador, testes e lint. Sem ele, o comando abre as perguntas uma a uma no terminal.

3. Entre na pasta e instale as dependências:

   cd ola-vue
   npm install

4. Apague o conteúdo de src/App.vue e escreva isto no lugar:

   <script setup>
   import { ref } from 'vue'
   
   const contador = ref(0)
   const nome = ref('')
   </script>
   
   <template>
     <main>
       <h1>Olá, Vue</h1>
   
       <p>Contador: {{ contador }}</p>
       <button @click="contador++">Somar 1</button>
   
       <p><input v-model="nome" placeholder="digite seu nome" /></p>
       <p>Você digitou: {{ nome }}</p>
     </main>
   </template>

   O esqueleto do --default vem com TypeScript ligado, e por isso o arquivo de entrada dele se chama main.ts. O componente acima usa <script setup> sem lang="ts" e roda do mesmo jeito.

5. Suba o servidor de desenvolvimento:

   npm run dev

   O Vite imprime o endereço no terminal. O padrão é http://localhost:5173/. Abra ele no navegador.

O que Vue não é

O mito mais repetido é que a Options API foi aposentada no Vue 3 e que código novo tem obrigação de usar Composition API. A documentação oficial diz o contrário. Os dois estilos cobrem os casos de uso comuns, são interfaces diferentes movidas pelo mesmo sistema por baixo, e a Options API está implementada em cima da Composition API. A própria doc recomenda Options API para quem trabalha sem ferramenta de build ou em cenário de baixa complexidade.

Onde a confusão tem base real é na ferramenta, não no estilo de escrita. O Vue CLI entrou em modo de manutenção, e a página dele manda usar o create-vue para gerar projeto baseado em Vite. Tutorial antigo ensina vue create, e quem segue instala uma ferramenta parada achando que está começando pelo caminho oficial.

Fontes

• Vue.js, Quick Start, de onde saíram os comandos de criação do projeto e a opção sem etapa de build. Conferida em 15/08/2026.
• Vue.js, Reactivity Fundamentals, sobre ref(), .value e o mecanismo de rastrear e disparar. Conferida em 15/08/2026.
• Vue.js, Form Input Bindings, onde está a expansão exata do v-model. Conferida em 15/08/2026.
• Vue.js, Introduction, sobre os dois estilos de API e quando usar cada um. Conferida em 15/08/2026.
• Vue CLI, com o aviso de modo de manutenção e a indicação do create-vue. Conferida em 15/08/2026.

O hello world desta página foi executado em 15/08/2026, no Node 22.23.0. O comando npm create vue@latest ola-vue -- --default rodou com create-vue 3.23.0, o npm install trouxe Vue 3.5.41 e Vite 8.2.1, e o npm run dev subiu o servidor em http://localhost:5173/. Na tela apareceu "Contador: 0". Um clique em "Somar 1" levou a linha para "Contador: 1", e digitar "Guilherme" no campo deixou a linha de baixo em "Você digitou: Guilherme".

Para continuar

Esse mesmo contador existe em React com um caminho diferente, e em Angular com a CLI montando o projeto inteiro antes da primeira linha. Ver os três lado a lado é o jeito mais rápido de escolher um e parar de pesquisar qual é o melhor. O caminho completo, com back end e banco, fica no mapa da stack web.

O curso desta trilha está em preparação. A lista paga menos.

Os tutoriais daqui continuam gratuitos. O que está a caminho é um curso pago que transforma esse mapa em formação guiada, na ordem certa e com projeto. Deixe seu e-mail: você recebe os estudos novos gratuitos e, no lançamento, o desconto de quem entrou na lista primeiro.