Obie tworzą reaktywny stan w Composition API, ale działają inaczej. ref opakowuje dowolną wartość (w tym typy pierwotne) w reaktywny kontener; reactive sprawia, że obiekt jest głęboko reaktywny bezpośrednio.
Obie tworzą reaktywny stan w Composition API, ale działają inaczej. ref opakowuje dowolną wartość (w tym typy pierwotne) w reaktywny kontener; reactive sprawia, że obiekt jest głęboko reaktywny bezpośrednio.
<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>
Główna osobliwość: w JavaScript dostęp do ref uzyskuje się poprzez .value; w szablonie Vue automatycznie go rozpakuje. Zapomnięcie .value w skrypcie to najczęstszy błąd dla początkujących.
<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 działa tylko na obiektach/tablicach (nie na typach pierwotnych) i właściwości używa się bezpośrednio.
let state = reactive({ count: 0 });
state = { count: 5 }; // ❌ breaks reactivity (lost the reactive proxy)
const { count } = state; // ❌ destructuring loses reactivity
Przepisanie obiektu reactive lub destrukturyzacja jego właściwości rozłącza je od reaktywności — częsta pułapka. ref nie ma tego problemu (przypisujesz .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)
Wiele zespołów standaryzuje ref wszędzie dla spójności.
ref i reactive to podstawa reaktywnego stanu Composition API Vue 3.
Zrozumienie, że ref wymaga .value w skrypcie (automatycznie rozpakowany w szablonach) i że reactive traci reaktywność przy przypisaniu/destrukturyzacji, zapobiega dwóm najczęstszym bugom reaktywności w Vue.