Vue 11: ref vs reactive
easy⏱ 5 mincoursevue
ref() necesita .value, reactive() no
ref(valor) retorna un objeto con una única propiedad .value — léela/escríbela explícitamente en JavaScript (count.value++), pero las plantillas de Vue desenvuelven automáticamente los refs de nivel superior, así que {{ count }} simplemente funciona. reactive(obj) en cambio retorna un Proxy sobre el objeto mismo — accede y muta sus propiedades directamente (user.name = 'X'), sin .value nunca, ni en JS ni en la plantilla. Usa ref para primitivos (números, strings, booleanos) y reactive para objetos/arrays que mantendrás intactos y mutarás en el lugar.
import { ref, reactive } from 'vue';
const count = ref(0);
count.value++; // must use .value in JS
const user = reactive({ name: 'Ada' });
user.name = 'Grace'; // direct mutation, no .value
// In a template, Vue auto-unwraps top-level refs:
// {{ count }} -- correct
// {{ count.value }} -- wrong, unnecessary in templates
Desestructurar reactive() rompe la reactividad
Una trampa común: desestructurar un objeto reactive() — const { name } = user — rompe la reactividad, porque copias el valor primitivo actual, no un enlace vivo. Vue ofrece toRefs(user) para desestructurar en refs individuales que permanecen conectados a la fuente. ref() no tiene este problema porque siempre interactúas a través de la caja .value, que ES la conexión reactiva.
Construye la ProfileCard
Haz clic en ref++ y confirma que el contador usa .value dentro de increment(). Haz clic en promote (reactive) y confirma que user.role se muta sin ningún .value — aunque ambos cambios se reflejan de inmediato en la plantilla.