Oba ustvarita reaktivno stanje v Composition API, vendar delujeta drugače. ref ovije katero koli vrednost (vključno s primitivami) v reaktivno posodo; reactive neposredno naredi objekt globoko reaktiven.
Oba ustvarita reaktivno stanje v Composition API, vendar delujeta drugače. ref ovije katero koli vrednost (vključno s primitivami) v reaktivno posodo; reactive neposredno naredi objekt globoko reaktiven.
<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>
Ključna posebnost: v JavaScriptu dostopate ref prek .value; v predlogi Vue ga samodejno razpakira. Pozabljanje .value v skripti je najčeščja začetniška napaka.
<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 deluje samo na objektih/poljih (ne na primitivah) in lastnine uporabljate neposredno.
let state = reactive({ count: 0 });
state = { count: 5 }; // ❌ breaks reactivity (lost the reactive proxy)
const { count } = state; // ❌ destructuring loses reactivity
Prerazdelitev reactive objekta ali razdelitev njegovih lastnosti prekine njihovo reaktivnost — pogost problem. ref nima te težave (.value prerazdelite).
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)
Mnoge ekipe standardizirajo ref povsod za doslednost.
ref in reactive so temelj reaktivnega stanja Composition API Vue 3.
Razumevanje, da ref potrebuje .value v skripti (samodejno razpakiran v predlogah) in da reactive izgubi reaktivnost pri prerazdelitvi/razdelitvi, preprečuje dve najpogostejši napaki reaktivnosti v Vue.