Beide erstellen reaktiven State in der Composition API, funktionieren aber unterschiedlich. ref wrappet jeden Wert (einschließlich Primitives) in einen reaktiven Container; reactive macht ein Objekt direkt tief reaktiv.
Beide erstellen reaktiven State in der Composition API, funktionieren aber unterschiedlich. ref wrappet jeden Wert (einschließlich Primitives) in einen reaktiven Container; reactive macht ein Objekt direkt tief reaktiv.
<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>
Die Besonderheit: In JavaScript greifst du auf ein ref über .value zu; im Template unwrappet Vue es automatisch. Das Vergessen von .value im Script ist der häufigste Anfängerfehler.
<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 funktioniert nur bei Objekten/Arrays (nicht bei Primitives) und du nutzt die Eigenschaften direkt.
let state = reactive({ count: 0 });
state = { count: 5 }; // ❌ breaks reactivity (lost the reactive proxy)
const { count } = state; // ❌ destructuring loses reactivity
Das Reassignieren eines reactive Objekts oder das Destructuren seiner Eigenschaften unterbrechen ihre Verbindung zur Reaktivität — eine häufige Fallgrube. ref hat dieses Problem nicht (du reassignierst .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)
Viele Teams standardisieren auf ref überall für Konsistenz.
ref und reactive sind die Grundlage des reaktiven State in Vue 3s Composition API.
Das Verständnis dafür, dass ref im Script .value benötigt (auto-unwrappet in Templates) und dass reactive bei Reassignierung/Destructuring die Reaktivität verliert, verhindert die zwei häufigsten Reaktivitätsfehler in Vue.