Ambos crean estado reactivo en la Composition API, pero funcionan de manera diferente. ref envuelve cualquier valor (incluyendo primitivos) en un contenedor reactivo; reactive hace un objeto profundamente reactivo directamente.
Ambos crean estado reactivo en la Composition API, pero funcionan de manera diferente. ref envuelve cualquier valor (incluyendo primitivos) en un contenedor reactivo; reactive hace un objeto profundamente reactivo directamente.
<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>
La particularidad clave: en JavaScript accedes a un ref a través de .value; en la plantilla Vue lo desenvuelve automáticamente. Olvidar .value en script es el error más común entre principiantes.
<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 solo funciona en objetos/arrays (no en primitivos) y usas las propiedades directamente.
let state = reactive({ count: 0 });
state = { count: 5 }; // ❌ breaks reactivity (lost the reactive proxy)
const { count } = state; // ❌ destructuring loses reactivity
Reasignar un objeto reactive o desestructurar sus propiedades desconecta la reactividad — una trampa frecuente. ref no tiene este problema (reasignas .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)
Muchos equipos estandarizan en ref en todas partes por consistencia.
ref y reactive son la base del estado reactivo de la Composition API de Vue 3.
Entender que ref necesita .value en script (desenvuelto automáticamente en plantillas) y que reactive pierde reactividad al reasignar/desestructurar previene los dos errores de reactividad más comunes en Vue.