Ambele creează stare reactivă în Composition API, dar funcționează diferit. ref împachetează orice valoare (inclusiv primitive) într-un container reactiv; reactive face un obiect profund reactiv direct.
Ambele creează stare reactivă în Composition API, dar funcționează diferit. ref împachetează orice valoare (inclusiv primitive) într-un container reactiv; reactive face un obiect profund reactiv direct.
<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>
Particularitatea principală: în JavaScript accesezi o ref prin .value; în template Vue o despachetează automat. Uita .value în script este cea mai comună greșeală pentru începători.
<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 funcționează doar pe obiecte/matrice (nu pe primitive) și folosești proprietățile direct.
let state = reactive({ count: 0 });
state = { count: 5 }; // ❌ breaks reactivity (lost the reactive proxy)
const { count } = state; // ❌ destructuring loses reactivity
Reatribuirea unui obiect reactive sau destructurarea proprietăților sale deconectează reactivitatea — o capcană frecventă. ref nu are această problemă (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)
Mulți echipe standardizează pe ref peste tot pentru consistență.
ref și reactive sunt fundamentul stării Composition API a Vue 3.
Înțelegerea că ref are nevoie de .value în script (despachetate automat în template-uri) și că reactive pierde reactivitate la reatribuire/destructurare previne cele două bug-uri de reactivitate cele mai comune în Vue.