Entrambi creano stato reattivo nella Composition API, ma funzionano diversamente. ref racchiude qualsiasi valore (inclusi i primitivi) in un contenitore reattivo; reactive rende un oggetto profondamente reattivo direttamente.
Entrambi creano stato reattivo nella Composition API, ma funzionano diversamente. ref racchiude qualsiasi valore (inclusi i primitivi) in un contenitore reattivo; reactive rende un oggetto profondamente reattivo direttamente.
<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>
L'aspetto peculiare: in JavaScript accedi a un ref attraverso .value; nel template Vue lo "unwrappa" automaticamente. Dimenticare .value nello script è il bug più comune tra i principianti.
<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 funziona solo su oggetti/array (non su primitivi) e usi le proprietà direttamente.
let state = reactive({ count: 0 });
state = { count: 5 }; // ❌ breaks reactivity (lost the reactive proxy)
const { count } = state; // ❌ destructuring loses reactivity
Riassegnare un oggetto reactive o destructurarne le proprietà disconnette queste dalla reattività — un errore frequente. ref non ha questo problema (riassegni .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)
Molti team standardizzano su ref ovunque per coerenza.
ref e reactive sono la base dello stato della Composition API di Vue 3.
Comprendere che ref richiede .value nello script (auto-unwrappato nei template) e che reactive perde reattività su riassegnazione/destructuring previene i due bug di reattività più comuni in Vue.