Oba vytváří reaktivní stav v Composition API, ale fungují různě. ref zabalí jakoukoli hodnotu (včetně primitiv) do reaktivního kontejneru; reactive dělá objekt přímo hluboce reaktivní.
Oba vytváří reaktivní stav v Composition API, ale fungují různě. ref zabalí jakoukoli hodnotu (včetně primitiv) do reaktivního kontejneru; reactive dělá objekt přímo hluboce reaktivní.
<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>
Hlavní zvláštnost: v JavaScriptu přistupujete k ref přes .value; v šabloně Vue jej automaticky rozbalí. Zapomenutí .value v skriptu je nejčastější chybou začátečníků.
<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 funguje pouze na objektech/polích (ne na primitivech) a vlastnosti používáte přímo.
let state = reactive({ count: 0 });
state = { count: 5 }; // ❌ breaks reactivity (lost the reactive proxy)
const { count } = state; // ❌ destructuring loses reactivity
Přiřazení reactive objektu nebo destrukturování jeho vlastností přeruší jejich spojení s reaktivitou — částé úskalí. ref nemá tento problém (přiřazujete .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)
Množství týmů standardizuje na ref všude pro konzistenci.
ref a reactive jsou základem reaktivního stavu Composition API v Vue 3.
Chápání toho, že ref potřebuje .value ve skriptu (automaticky rozbaleno v šablonách) a že reactive ztrácí reaktivitu při přiřazení/destrukturování, zabrání dvěma nejčastějším chybám reaktivity v Vue.