Begge oppretter reaktiv tilstand i Composition API, men de fungerer annerledes. ref wrapper enhver verdi (inkludert primitives) i en reaktiv container; reactive gjør et objekt dypt reaktivt direkte.
Begge oppretter reaktiv tilstand i Composition API, men de fungerer annerledes. ref wrapper enhver verdi (inkludert primitives) i en reaktiv container; reactive gjør et objekt dypt reaktivt direkte.
<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>
Hovedtrekket: i JavaScript får du tilgang til en ref gjennom .value; i malen pakker Vue den ut automatisk. Å glemme .value i script er den vanligste nybegynnerfeil.
<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 fungerer bare på objekter/arrays (ikke primitives) og du bruker egenskapene direkte.
let state = reactive({ count: 0 });
state = { count: 5 }; // ❌ breaks reactivity (lost the reactive proxy)
const { count } = state; // ❌ destructuring loses reactivity
Tilordning av et reactive-objekt eller dekonstruering av egenskapene bryter reaktiviteten — en hyppig gotcha. ref har ikke dette problemet (du tilordner .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)
Mange lag standardiserer på ref overalt for konsistens.
ref og reactive er grunnlaget for Vue 3s Composition API state.
Å forstå at ref trenger .value i script (auto-unwrapped i maler) og at reactive mister reaktivitet ved tilordning/dekonstruering forhindrer de to vanligste reaktivitetsbuggene i Vue.