Kedua-duanya mencipta keadaan reaktif dalam Composition API, tetapi berfungsi secara berbeza. ref membungkus sebarang nilai (termasuk primitif) dalam kontainer reaktif; reactive membuat objek mendalam reaktif secara langsung.
Kedua-duanya mencipta keadaan reaktif dalam Composition API, tetapi berfungsi secara berbeza. ref membungkus sebarang nilai (termasuk primitif) dalam kontainer reaktif; reactive membuat objek mendalam reaktif secara 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>
Keanehan utama: dalam JavaScript anda mengakses ref melalui .value; dalam templat Vue membongkar secara automatik. Melupakan .value dalam skrip adalah bug pemula yang paling biasa.
<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 hanya berfungsi pada objek/tatasusunan (bukan primitif) dan anda menggunakan sifat secara langsung.
let state = reactive({ count: 0 });
state = { count: 5 }; // ❌ breaks reactivity (lost the reactive proxy)
const { count } = state; // ❌ destructuring loses reactivity
Mengugaskan semula objek reactive atau memperepatnya sifat memutuskan mereka daripada reaktiviti — sebuah kesan yang kerap. ref tidak mempunyai masalah ini (anda menugaskan semula .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)
Banyak pasukan menyeragamkan pada ref di mana-mana untuk konsistensi.
ref dan reactive adalah asas keadaan Composition API Vue 3.
Memahami bahawa ref memerlukan .value dalam skrip (dibongkar secara automatik dalam templat) dan bahawa reactive kehilangan reaktiviti atas tugasan semula/perepatan mencegah dua bug reaktiviti yang paling biasa dalam Vue.