Beide creëren reactive state in de Composition API, maar ze werken anders. ref verpakt elke waarde (inclusief primitives) in een reactive container; reactive maakt een object direct diep reactive.
Beide creëren reactive state in de Composition API, maar ze werken anders. ref verpakt elke waarde (inclusief primitives) in een reactive container; reactive maakt een object direct diep reactive.
<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>
De belangrijkste eigenaardigheden: in JavaScript benaader je een ref via .value; in de template unwrapped Vue het automatisch. .value vergeten in het script is het meest voorkomende bug voor beginners.
<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 werkt alleen op objecten/arrays (niet op primitives) en je gebruikt de properties direct.
let state = reactive({ count: 0 });
state = { count: 5 }; // ❌ breaks reactivity (lost the reactive proxy)
const { count } = state; // ❌ destructuring loses reactivity
Het toewijzen van een reactive object of het destructureren van de properties verbreekt de reactiviteit — een veelvoorkomend probleem. ref heeft dit probleem niet (je wijst .value toe).
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)
Much teams standaardiseren op ref overal voor consistentie.
ref en reactive zijn de basis van Vue 3's Composition API state.
Inzien dat ref .value nodig heeft in script (auto-unwrapped in templates) en dat reactive reactiviteit verliest bij toewijzing/destructurering voorkomt de twee meest voorkomende reactivity bugs in Vue.