Loro-lorone nggawe stasi reaktif ing Composition API, nanging cara kerjane beda. ref mbungkus apa wae nilai (kalebu primitif) ing wadah reaktif; reactive nggawe obyek deeply reactive langsung.
Loro-lorone nggawe stasi reaktif ing Composition API, nanging cara kerjane beda. ref mbungkus apa wae nilai (kalebu primitif) ing wadah reaktif; reactive nggawe obyek deeply reactive langsung.
<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>
Perang khas: ing JavaScript sampeyan ngaksès ref liwat .value; ing template Vue ngatur otomatis. Melungso .value ing script iku bug pemula sing paling umum.
<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 mung gumana ing obyek/array (dudu primitif) lan sampeyan nganggo properti langsung.
let state = reactive({ count: 0 });
state = { count: 5 }; // ❌ breaks reactivity (lost the reactive proxy)
const { count } = state; // ❌ destructuring loses reactivity
Ngreassign obyek reactive utawa ngidestruct properti-properti putus saka reaktivitas — pilosowah sing umum. ref ora duwe masalah iki (sampeyan reassign .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)
Lawang tim standardisasi ing ref ing njerone kanggo konsistensi.
ref lan reactive minangka fondasi stasi Composition API Vue 3.
Nemahi manawa ref butuh .value ing script (otomatis unwrap ing template) lan manawa reactive ilang reaktivitas ing reassignment/destructuring nyegah rong bugs reaktivitas sing paling umum ing Vue.