0Pricing
Vue Academy · Aula

ref versus reactive: quando usar cada um

Acesso a ref.value, desempacotamento de reactive em templates, toRefs() e toRef() para desestruturação.

ref versus reactive: quando usar cada um é uma aula grátis de Vue Academy no CoddyKit. Esta é a aula 3 de 4. 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 4 aulas no total.

Duas ferramentas de reatividade

O Vue oferece duas maneiras principais de criar estado reativo: ref() e reactive(). Elas se sobrepõem, mas cada uma se adapta melhor a determinadas situações. Saber quando escolher cada uma mantém o código organizado.

ref funciona com qualquer valor

ref() pode envolver qualquer coisa: um número, texto, booleano, matriz ou objeto. Em JavaScript, o valor fica em .value.

import { ref } from 'vue'

const count = ref(0)
const name = ref('Alice')
const isOpen = ref(false)

count.value++
name.value = 'Bob'

ref é desempacotado automaticamente nos templates

Embora você precise escrever .value em JavaScript, o template desempacota automaticamente um ref no nível superior. Assim, {{ count }} funciona diretamente.

<!-- template -->
<p>{{ count }} - {{ name }}</p>

reactive é para objetos

reactive() aceita apenas objetos (incluindo matrizes e Maps). Ele retorna um proxy profundamente reativo, e você acessa as propriedades diretamente — sem .value.

import { reactive } from 'vue'

const state = reactive({
  name: 'Alice',
  age: 30,
  hobbies: ['reading']
})

state.age = 31
state.hobbies.push('coding')

reactive é profundamente reativo

Os objetos aninhados e as matrizes dentro de um objeto reactive também são reativos. Alterar uma propriedade aninhada dispara atualizações sem trabalho adicional.

const state = reactive({ profile: { city: 'Paris' } })
state.profile.city = 'Berlin' // reactive!

A limitação de reactive: a desestruturação o interrompe

Se você desestruturar um objeto reactive, as variáveis extraídas se tornam valores comuns e perdem a reatividade. Essa é a principal armadilha.

const state = reactive({ name: 'Alice' })
let { name } = state
name = 'Bob'
// state.name is still 'Alice' - reactivity lost!

A solução: toRefs para desestruturação segura

toRefs() converte cada propriedade de um objeto reativo em um ref. Agora você pode desestruturar e manter a reatividade, pois cada parte é um ref vinculado novamente à origem.

import { reactive, toRefs } from 'vue'

const state = reactive({ name: 'Alice', age: 30 })
const { name, age } = toRefs(state)
name.value = 'Bob' // state.name is now 'Bob'

toRef para uma única propriedade

Se você precisa de apenas uma propriedade como ref, use toRef(state, 'key'). Ela permanece sincronizada com o objeto de origem nos dois sentidos.

import { reactive, toRef } from 'vue'

const state = reactive({ age: 30 })
const age = toRef(state, 'age')
age.value = 31 // state.age is now 31

Uma regra prática

  • Use ref() para valores primitivos (números, textos e booleanos) e valores independentes.
  • Use reactive() para um grupo de propriedades relacionadas que formam um único objeto.
  • Ao retornar um objeto reativo de um composable, envolva-o em toRefs().

ref também pode conter objetos

Você não é obrigado a escolher reactive para objetos. Um ref que contém um objeto também é profundamente reativo — basta acessá-lo por meio de .value. Muitas equipes usam ref em todos os casos para manter a consistência.

const user = ref({ name: 'Alice' })
user.value.name = 'Bob' // reactive
user.value = { name: 'Carol' } // replace whole object

Tabela-resumo

  • ref: qualquer valor, precisa de .value em JS, é desempacotado automaticamente no template e pode ser totalmente reatribuído.
  • reactive: apenas objetos, sem .value, profundamente reativo, mas é interrompido pela desestruturação e não pode ser reatribuído.
  • toRefs: uma ponte que torna as propriedades reativas desestruturáveis.

Verificação rápida

Escolha a ferramenta certa.

Recapitulação

Principais conclusões:

  • ref() envolve qualquer valor e precisa de .value em JavaScript.
  • reactive() é usado para objetos e é profundamente reativo, mas a desestruturação o interrompe.
  • toRefs() permite desestruturar um objeto reativo com segurança.
  • Use ref para valores primitivos e reactive para o estado de objetos agrupados.

Perguntas Frequentes

A aula “ref versus reactive: quando usar cada um” é grátis?

Sim — o texto completo de “ref versus reactive: quando usar cada um” é 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 4 aulas no total.

O que vou aprender em “ref versus reactive: quando usar cada um”?

Acesso a ref.value, desempacotamento de reactive em templates, toRefs() e toRef() para desestruturação. 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 3 de 4.

Quanto tempo leva a aula “ref versus reactive: quando usar cada um”?

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

  1. Por que usar a Composition API?
  2. Função setup() e variáveis reativas
  3. ref versus reactive: quando usar cada um
  4. Computed e Watch na Composition API
← Voltar para Vue Academy