Vue.js - Iniciante | Reatividade

Definição

Reatividade é o coração do Vue.
Ela é o que faz com que, quando você altera um valor no JavaScript, a interface (HTML) seja automaticamente atualizada sem você precisar manipular o DOM manualmente.

No modelo tradicional de programação com JavaScript puro, teríamos que usar document.querySelector, innerText, addEventListener e várias manipulações diretas do DOM. Isso gera muito código e é difícil de manter.

Com Vue, a reatividade resolve isso de forma automática: você declara o estado (com ref ou reactive) e o Vue cuida de refletir as mudanças na tela.

---

Exemplo básico

No HelloWorld.vue, temos:

<script setup lang="ts">
import { ref } from "vue"

defineProps<{ msg: string }>()

const count = ref(0)
</script>

<template>
  <button @click="count++">count is {{ count }}</button>
</template>

Aqui o count começa em 0.

• Quando clicamos no botão, executamos count++.

• O Vue detecta essa mudança e atualiza automaticamente o HTML, mostrando o novo valor.

Essa é a reatividade em ação: não precisamos dizer “onde” atualizar, o Vue já sabe.

---

ref()

O jeito mais simples de criar valores reativos é com ref().

<script setup lang="ts">
import { ref } from "vue"

const nome = ref("Matheus")
</script>

<template>
  <p>Olá, {{ nome }}</p>
  <button @click="nome = 'Maria'">Trocar nome</button>
</template>

• ref("Matheus") cria uma variável reativa.

• O Vue envolve esse valor em um objeto especial que “escuta” mudanças.

• Quando alteramos nome, a tela atualiza automaticamente.

🔎 Detalhe importante: dentro do JavaScript, acessamos com nome.value, mas dentro do template podemos usar {{ nome }} direto.

---

reactive()

Quando queremos um objeto com várias propriedades, usamos reactive().

<script setup lang="ts">
import { reactive } from "vue"

const usuario = reactive({
  nome: "Ana",
  idade: 25
})
</script>

<template>
  <p>{{ usuario.nome }} tem {{ usuario.idade }} anos</p>
  <button @click="usuario.idade++">Envelhecer</button>
</template>

• Aqui criamos um objeto reativo inteiro.

• Sempre que mudamos uma propriedade, o Vue atualiza a tela.

---

Computed properties

Às vezes queremos valores derivados do estado, mas que também se atualizam automaticamente. Para isso usamos computed().

<script setup lang="ts">
import { ref, computed } from "vue"

const nome = ref("João")
const sobrenome = ref("Silva")

const nomeCompleto = computed(() => {
  return `${nome.value} ${sobrenome.value}`
})
</script>

<template>
  <p>Nome completo: {{ nomeCompleto }}</p>
  <button @click="sobrenome = 'Souza'">Trocar sobrenome</button>
</template>

• nomeCompleto não é escrito diretamente, ele é calculado.

• Sempre que nome ou sobrenome mudarem, o Vue recalcula nomeCompleto.

---

watch

O watch serve para executar algo quando um valor mudar.
Ele é útil para casos onde não basta atualizar a interface, mas precisamos reagir de forma mais complexa, como chamar uma API ou salvar algo no localStorage.

<script setup lang="ts">
import { ref, watch } from "vue"

const count = ref(0)

watch(count, (novo, antigo) => {
  console.log(`O contador mudou de ${antigo} para ${novo}`)
})
</script>

<template>
  <button @click="count++">count is {{ count }}</button>
</template>

Agora, toda vez que count mudar, a função dentro do watch será executada.

---

Exemplo prático de reatividade

Imagine que queremos habilitar um botão somente quando o texto tiver mais de 5 caracteres:

<script setup lang="ts">
import { ref, computed } from "vue"

const texto = ref("")

const podeEnviar = computed(() => texto.value.length > 5)

function enviar() {
  alert("Enviado: " + texto.value)
}
</script>

<template>
  <input v-model="texto" placeholder="Digite algo" />
  <button @click="enviar" :disabled="!podeEnviar">Enviar</button>
  <p>Texto atual: {{ texto }}</p>
</template>

• texto é um estado reativo.

• podeEnviar é um valor derivado com computed.

• O disabled do botão faz binding com podeEnviar.

• Resultado: quando o usuário digita e atinge mais de 5 caracteres, o botão fica habilitado automaticamente.

---

Conclusão

A reatividade é o que faz o Vue ser tão poderoso e simples de usar.
Ela permite que a interface seja declarativa:

• Você descreve como o HTML deve se comportar de acordo com o estado.

• O Vue cuida de atualizar o DOM quando o estado muda.

Ferramentas principais da reatividade no Vue:

• ref() → valores primitivos reativos.

• reactive() → objetos e arrays reativos.

• computed() → valores derivados que se atualizam automaticamente.

• watch() → executar lógica personalizada quando algo muda.

👉 No próximo passo, vamos ver Interpolação e Binding, que mostra como podemos mostrar e ter acesso ao valores reativos de forma muito prática.