Vue Academy · Aula

Fundamentos da reatividade

Aprenda como o Vue acompanha as dependências reativas.

Fundamentos da reatividade é uma aula grátis de Vue Academy no CoddyKit. Esta é a aula 1 de 3. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Vue Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Vue Academy inclui 3 aulas no total.

O que é reatividade?

Reatividade é a atualização automática do DOM pelo Vue quando seus dados mudam.

Você altera um valor em JavaScript
O Vue detecta a alteração
A exibição é renderizada novamente para corresponder aos dados

Não é necessária manipulação manual do DOM.

Como o Vue acompanha dependências

O Vue usa um sistema de rastreamento de dependências.

Quando uma renderização lê um valor reativo, o Vue registra essa dependência
Quando esse valor muda depois, o Vue sabe quais renderizações deve executar novamente
Isso torna as atualizações precisas e eficientes

ref para valores primitivos

Na API de Composição, ref torna um único valor reativo.

import { ref } from "vue"

const count = ref(0)
const name = ref("Ada")

count.value++          // update via .value
console.log(name.value) // read via .value

ref nos modelos

Nos modelos, as refs são desempacotadas automaticamente, portanto você não precisa usar .value.

<script setup>
import { ref } from "vue"
const count = ref(0)
</script>

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

reactive para objetos

reactive torna um objeto inteiro reativo. Você acessa as propriedades diretamente, sem .value.

import { reactive } from "vue"

const state = reactive({
  count: 0,
  user: { name: "Ada" }
})

state.count++
state.user.name = "Grace"

ref ou reactive

Escolha entre as duas opções:

ref funciona com qualquer valor (primitivos e objetos), acessado com .value
reactive funciona somente com objetos, acessados diretamente

Muitas equipes preferem usar ref em todos os casos por consistência.

A opção data (Vue 2 / API de Opções)

A API de Opções usa a função data. Toda propriedade retornada é reativa.

export default {
  data() {
    return {
      count: 0,
      items: []
    }
  },
  methods: {
    add() { this.count++ }
  }
}

ressalvas da reatividade com vetores

A atribuição direta a um índice do vetor pode ser complicada, especialmente no Vue 2.

No Vue 2, definir arr[5] = x não acionava atualizações
Os proxies do Vue 3 lidam com a maioria dos casos, mas ainda é recomendável ter cuidado

Prefira métodos de vetor para obter clareza e segurança.

Métodos reativos de vetor

Métodos que alteram dados, como push, splice e pop, são rastreados de forma reativa.

const items = reactive([1, 2, 3])

items.push(4)        // reactive
items.splice(0, 1)   // reactive

// Replacing an index in Vue 3 proxy:
items[0] = 99        // works in Vue 3

Substituir ou alterar

Duas formas de atualizar vetores:

Alterar com push, splice e sort
Substituir atribuindo um novo vetor, por exemplo, usando filter ou map

Ambas acionam a reatividade no Vue 3. Substituir costuma ser mais limpo para listas derivadas.

// Mutate
state.list.push(item)

// Replace with a filtered copy
state.list = state.list.filter(x => x.active)

Evitando a perda de reatividade

Desestruturar um objeto reativo interrompe a reatividade dessas variáveis.

Extrair uma propriedade copia seu valor atual
Use toRefs para manter a reatividade ao desestruturar

import { reactive, toRefs } from "vue"

const state = reactive({ count: 0 })

// Keeps reactivity
const { count } = toRefs(state)

Verificação rápida

Teste sua compreensão sobre a reatividade do Vue.

Recapitulação: fundamentos da reatividade

Você aprendeu como funciona a reatividade do Vue:

O Vue acompanha quais dados cada renderização usa
ref torna valores reativos (use .value no JS)
reactive torna objetos reativos (acesso direto)
A API de Opções usa a função data
Use métodos de vetor e toRefs para evitar perder a reatividade

Próximo: propriedades computadas.

Perguntas Frequentes

A aula “Fundamentos da reatividade” é grátis?

Sim — o texto completo de “Fundamentos da reatividade” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Vue Academy, atualize para CoddyKit PRO. O curso de Vue Academy inclui 3 aulas no total.

O que vou aprender em “Fundamentos da reatividade”?

Aprenda como o Vue acompanha as dependências reativas. Você pratica Vue Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar Vue Academy?

Nenhuma experiência prévia é necessária. Vue Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 1 de 3.

Quanto tempo leva a aula “Fundamentos da reatividade”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de Vue Academy?

Sim. Cada aula de Vue Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

← Voltar para Vue Academy