0Pricing
Frontend Academy · Aula

ref() e reactive()

Crie primitivas reativas com ref(), envolva objetos com reactive() e entenda quando usar cada um e como acessar valores de ref por meio de .value.

ref() e reactive() é uma aula grátis de Frontend Academy no CoddyKit. Esta é a aula 1 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 Frontend Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Frontend Academy inclui 4 aulas no total.

Reatividade no Vue 3

A API de composição do Vue 3 utiliza primitivas reativas para acompanhar o estado. Duas funções principais: ref() para valores primitivos e reactive() para objetos. As alterações nesses valores atualizam automaticamente a interface.

ref() para valores primitivos

ref(value) envolve um valor em um contêiner reativo. Acesse e altere o valor por meio de .value no script. Nos templates, o Vue remove automaticamente o envoltório das refs — não é necessário usar .value.

<script setup>
import { ref } from 'vue';

const count = ref(0);
const name  = ref('Alice');

function increment() {
  count.value++; // .value in script
}
</script>

<template>
  <p>{{ count }}</p>  <!-- no .value in template -->
  <button @click="increment">+</button>
</template>

reactive() para objetos

reactive(object) retorna um proxy profundamente reativo do objeto. Acesse as propriedades diretamente — não é necessário usar .value em nenhum lugar.

<script setup>
import { reactive } from 'vue';

const form = reactive({
  email: '',
  password: '',
  rememberMe: false
});

// Mutate directly:
form.email = 'user@example.com';
</script>

<template>
  <input v-model="form.email">
</template>

ref versus reactive — quando usar cada um

Utilize ref() para: valores primitivos (string, number, boolean), valores que podem ser nulos e valores retornados por composables (mais fáceis de desestruturar). Utilize reactive() para: dados relacionados que pertencem juntos a um único objeto.

Armadilha da desestruturação de reactive()

Desestruturar um objeto reativo faz a reatividade ser perdida, pois as propriedades extraídas são valores simples, não refs reativas.

const state = reactive({ count: 0 });
const { count } = state; // NOT reactive
count++; // doesn't update Vue's tracking

// Fix: use toRefs() to destructure reactively:
import { toRefs } from 'vue';
const { count } = toRefs(state); // count is now a ref
count.value++;

toRef e toRefs

toRef(obj, 'key') cria uma ref vinculada a uma propriedade. toRefs(obj) converte todas as propriedades de um objeto reativo em refs individuais vinculadas — é seguro desestruturá-las.

import { toRefs } from 'vue';

const user = reactive({ name: 'Alice', age: 30 });
const { name, age } = toRefs(user);
// name and age are refs, still linked to user
name.value = 'Bob'; // user.name also becomes 'Bob'

ref() para elementos do DOM

Utilize ref(null) com um atributo ref correspondente no template para obter uma referência reativa a um elemento do DOM ou à instância de um componente filho.

<script setup>
import { ref, onMounted } from 'vue';

const inputEl = ref<HTMLInputElement | null>(null);

onMounted(() => {
  inputEl.value?.focus(); // now the DOM element is available
});
</script>

<template>
  <input ref="inputEl" type="text">
</template>

isRef e unref

isRef(val) verifica se um valor é uma ref. unref(val) remove o envoltório de uma ref ou retorna o valor como está quando ele não é uma ref. Isso é útil em composables que aceitam tanto refs quanto valores simples.

import { isRef, unref } from 'vue';

function double(val: Ref<number> | number) {
  return unref(val) * 2; // works with both ref and plain number
}

shallowRef e shallowReactive

shallowRef() é reativa apenas no nível superior, não profundamente. shallowReactive() funciona da mesma forma para objetos. Utilize-as para otimização de desempenho quando a reatividade profunda não for necessária, por exemplo, em estruturas de dados imutáveis grandes.

Alterar reactive() versus substituir

Com reactive(), altere as propriedades diretamente. Não é possível substituir o objeto inteiro — reactive() precisa manter a mesma referência. Para substituir o objeto, utilize ref(), que permite ref.value = newObject.

const state = reactive({ items: [] });
state.items.push(newItem); // OK
state.items = [newItem];   // also OK (mutating the property)
// state = reactive({ items: [newItem] }); // LOSES REACTIVITY — can't reassign

Reatividade profunda

Por padrão, reactive() é profundamente reativa — o Vue acompanha as alterações em objetos e arrays aninhados. Isso é conveniente, mas pode ser dispendioso para objetos muito grandes. Considere shallowReactive em situações sensíveis ao desempenho.

Verificação rápida

Por que a desestruturação de um objeto reactive() faz a reatividade ser perdida?

Recapitulação: ref() e reactive()

ref() envolve valores primitivos; acesse-os por meio de .value no script, que é removido automaticamente nos templates. reactive() torna os objetos profundamente reativos; altere as propriedades diretamente. A desestruturação faz a reatividade ser perdida — utilize toRefs(). ref(null) para refs de elementos do template. shallowRef/shallowReactive para desempenho. isRef/unref para utilitários de composables.

Perguntas Frequentes

A aula “ref() e reactive()” é grátis?

Sim — o texto completo de “ref() e reactive()” é 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 Frontend Academy, atualize para CoddyKit PRO. O curso de Frontend Academy inclui 4 aulas no total.

O que vou aprender em “ref() e reactive()”?

Crie primitivas reativas com ref(), envolva objetos com reactive() e entenda quando usar cada um e como acessar valores de ref por meio de .value. Você pratica Frontend 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 Frontend Academy?

Nenhuma experiência prévia é necessária. Frontend 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 4.

Quanto tempo leva a aula “ref() e reactive()”?

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 Frontend Academy?

Sim. Cada aula de Frontend 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. ref() e reactive()
  2. computed() e watch()
  3. A função setup() e script setup
  4. Composables: funções de composição reutilizáveis
← Voltar para Frontend Academy