Molemmat luovat reaktiivisen tilan Composition API:ssa, mutta ne toimivat eri tavalla. ref käärii minkä tahansa arvon (myös primitiivit) reaktiiviseen säiliöön; reactive tekee objektista syvällisesti reaktiivisen suoraan.
Molemmat luovat reaktiivisen tilan Composition API:ssa, mutta ne toimivat eri tavalla. ref käärii minkä tahansa arvon (myös primitiivit) reaktiiviseen säiliöön; reactive tekee objektista syvällisesti reaktiivisen suoraan.
<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>
Päävaikeellisuus: JavaScriptissa pääset ref-arvoon .value-kautta; malleissa Vue purkaa sen automaattisesti. .value-kaavan unohtaminen skriptissä on yleisimpiä aloittelijoiden virheitä.
<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 toimii vain objekteilla/taulukoilla (ei primitiiveillä) ja käytät ominaisuuksia suoraan.
let state = reactive({ count: 0 });
state = { count: 5 }; // ❌ breaks reactivity (lost the reactive proxy)
const { count } = state; // ❌ destructuring loses reactivity
reactive-objektin uudelleenarviointi tai sen ominaisuuksien destrukturointi katkaisee niiden yhteyden reaktiivisuuteen — yleinen sudenkuoppa. ref-funktiolla ei ole tätä ongelmaa (uudelleen arvioida .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)
Monet tiimit standardoivat ref kaikkialla johdonmukaisuuden vuoksi.
ref ja reactive ovat Vue 3:n Composition API:n reaktiivisen tilan perustus.
Ymmärtäminen siitä, että ref tarvitsee .value-kaavaa skriptissä (automaattisesti purettu malleissa) ja että reactive menettää reaktiivisuuden uudelleenarvioinnissa/destruktuuroinnissa, estää kaksi yleisintä reaktiivisuusvirhettä Vue:ssa.