Vue tem fama de ser o framework fácil de começar. A fama é merecida — mas por baixo desse "fácil" tem umas ideias boas que valem a pena entender antes de sair copiando exemplo da internet.
O que é o Vue, sem enrolação
Vue é um framework JavaScript pra construir interfaces. Em vez de você mexer no DOM na unha (document.querySelector pra cá, innerHTML pra lá), você descreve como a tela deve parecer para cada estado dos dados e deixa o Vue fazer a ponte.
A sacada que segura a coisa toda é simples: a UI é uma função do estado. Mudou o estado, a tela acompanha. Você para de pensar em "agora eu preciso atualizar aquele <span>" e passa a pensar em "quando esse dado muda, o que a tela mostra?". É menos passo a passo, mais declaração.
Reatividade: o coração do Vue
Reatividade é o mecanismo que faz a tela reagir sozinha quando um dado muda. Você declara um valor reativo, usa ele no template, e quando ele muda o Vue re-renderiza só o que dependia dele.
import { ref } from 'vue'
const contador = ref(0)
function incrementar() {
contador.value++
}
No template, contador vira texto direto. No JavaScript, você acessa e escreve via .value — esse .value é a pegadinha que todo iniciante esquece. Pra objetos, tem o reactive, que dispensa o .value mas só funciona com objetos e arrays.
Regra prática pra não travar: ref pra valores individuais (número, string, boolean), reactive quando você quer um objeto de estado. Na dúvida, ref resolve quase tudo.
Template syntax: HTML com superpoderes
O template do Vue é HTML de verdade com algumas adições. Nada de JSX obrigatório, nada de reaprender a escrever markup.
<button @click="incrementar">
Cliquei {{ contador }} vezes
</button>
<p v-if="contador > 0">Já clicou!</p>
<li v-for="item in lista" :key="item.id">{{ item.nome }}</li>
O essencial cabe em cinco coisas: {{ }} interpola valor, : (atalho de v-bind) liga um atributo a um dado, @ (atalho de v-on) escuta evento, v-if mostra ou esconde, v-for repete. Com isso você já monta 90% de uma tela. O resto é detalhe que você aprende quando precisa.
Composition API vs Options API
São duas formas de escrever o mesmo componente. A Options API organiza tudo por categoria: um bloco data, um methods, um computed. É didática e ótima pra componente pequeno.
export default {
data() {
return { contador: 0 }
},
methods: {
incrementar() { this.contador++ }
}
}
A Composition API (o <script setup> que você vê nos exemplos modernos) organiza por lógica, não por tipo. Estado, função e computed relacionados ficam juntos, e dá pra extrair pedaços em composables reutilizáveis.
<script setup>
import { ref } from 'vue'
const contador = ref(0)
function incrementar() { contador.value++ }
</script>
Nenhuma das duas está errada. A Options API é um começo mais suave; a Composition API escala melhor quando o componente cresce e você quer reaproveitar lógica. Documentação nova e a comunidade puxam pra Composition — se está começando hoje, aprenda ela primeiro, mas não surte se topar Options em código antigo.
Single-File Components: tudo num arquivo só
O formato marca-registrada do Vue é o arquivo .vue, o Single-File Component. Template, lógica e estilo do mesmo componente moram no mesmo lugar:
<template>
<button @click="incrementar">{{ contador }}</button>
</template>
<script setup>
import { ref } from 'vue'
const contador = ref(0)
function incrementar() { contador.value++ }
</script>
<style scoped>
button { padding: 8px 16px; }
</style>
O detalhe que salva a vida é o scoped no <style>: o CSS ali fica preso àquele componente e não vaza pra vazar o resto da aplicação. Acabou o medo de renomear uma classe e quebrar uma tela do outro lado do projeto.
Quando o Vue é uma ótima escolha
Vue brilha em três situações. Primeira: você está começando e quer um framework que não te afogue no primeiro dia — a curva é honestamente suave. Segunda: adoção incremental — dá pra jogar Vue num pedacinho de uma página legada sem reescrever o mundo, coisa que nem todo framework deixa fazer com tanta naturalidade. Terceira: você quer um ecossistema oficial e coeso — roteador (Vue Router) e estado (Pinia) são mantidos pelo mesmo time, então não vira aquele quebra-cabeça de escolher entre dez bibliotecas concorrentes.
Não é bala de prata. Time gigante já casado com outra stack, ou uma necessidade muito específica de um ecossistema que só existe em outro framework, são motivos legítimos pra olhar pro lado. Mas pra começar, aprender conceitos de UI reativa e entregar coisa de verdade rápido, é difícil errar com Vue.
Se você entendeu que a UI é função do estado, que reatividade é o Vue observando seus dados, e que um .vue junta tudo num arquivo — você já tem o modelo mental. O resto é escrever componente até virar automático. Abre um .vue e clica no botão.