Begge opretter reaktiv tilstand i Composition API, men de fungerer forskelligt. ref wrapper enhver værdi (inklusive primitives) i en reaktiv beholder; reactive gør et objekt dybt reaktivt direkte.
Begge opretter reaktiv tilstand i Composition API, men de fungerer forskelligt. ref wrapper enhver værdi (inklusive primitives) i en reaktiv beholder; reactive gør et objekt dybt 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>
Hovedpointen: I JavaScript tilgår du en ref gennem .value; i skabelonen unwrapper Vue det automatisk. At glemme .value i script er den mest almindelige begynder-fejl.
<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 kun på objekter/arrays (ikke primitives) og du bruger egenskaberne direkte.
let state = reactive({ count: 0 });
state = { count: 5 }; // ❌ breaks reactivity (lost the reactive proxy)
const { count } = state; // ❌ destructuring loses reactivity
Gentildelingen af et reactive objekt eller destrukturering af dets egenskaber afbryder deres forbindelse til reaktivitet — en hyppig gotcha. ref har ikke dette problem (du reassignerer .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 teams standardiserer på ref overalt for konsistens.
ref og reactive er grundlaget for Vue 3's Composition API-tilstand.
Forståelsen af, at ref har brug for .value i script (auto-unwrappet i skabeloner) og at reactive mister reaktivitet ved reassignering/destrukturering, forhindrer de to mest almindelige reaktivitetsfejl i Vue.