Ambos criam estado reativo na Composition API, mas funcionam de forma diferente. ref envolve qualquer valor (incluindo primitivos) em um container reativo; reactive torna um objeto profundamente reativo diretamente.
Ambos criam estado reativo na Composition API, mas funcionam de forma diferente. ref envolve qualquer valor (incluindo primitivos) em um container reativo; reactive torna um objeto profundamente reativo diretamente.
<script setup>
import { ref } from "vue";
const count = ref(0); // wraps a primitive
const user = ref({ name: "Ann" });
function inc() {
count.value++; // ⚠️ in SCRIPT you must use .value
user.value.name = "Bob";
}
</script>
<template>
<p>{{ count }}</p> <!-- ✅ in TEMPLATE, .value is auto-unwrapped -->
</template>
A peculiaridade principal: em JavaScript você acessa uma ref através de .value; no template Vue a desembrulha automaticamente. Esquecer .value no script é o bug mais comum para iniciantes.
<script setup>
import { reactive } from "vue";
const state = reactive({ count: 0, user: { name: "Ann" } });
state.count++; // ✅ access directly, no .value
state.user.name = "Bob"; // deeply reactive
</script>
reactive funciona apenas em objetos/arrays (não em primitivos) e você usa as propriedades diretamente.
let state = reactive({ count: 0 });
state = { count: 5 }; // ❌ breaks reactivity (lost the reactive proxy)
const { count } = state; // ❌ destructuring loses reactivity
Reatribuir um objeto reactive ou desestruturar suas propriedades desconecta elas da reatividade — uma pegadinha frequente. ref não tem esse problema (você reatribui .value).
ref → primitives, and the recommended default (works for everything, easy to reassign)
reactive→ when you want a grouped object of state without .value (but mind destructuring)
Muitos times padronizam em ref em todos os lugares para consistência.
ref e reactive são a base do estado da Composition API do Vue 3.
Entender que ref precisa de .value no script (desembrulhado automaticamente em templates) e que reactive perde reatividade em reatribuição/desestruturação previne os dois bugs de reatividade mais comuns no Vue.