Her ikisi de Composition API'de reaktif durum oluşturur, ancak farklı şekilde çalışırlar. ref herhangi bir değeri (primitifler dahil) reaktif bir konteyner içine sarar; reactive bir nesneyi doğrudan derin reaktif hale getirir.
Her ikisi de Composition API'de reaktif durum oluşturur, ancak farklı şekilde çalışırlar. ref herhangi bir değeri (primitifler dahil) reaktif bir konteyner içine sarar; reactive bir nesneyi doğrudan derin reaktif hale getirir.
<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>
Temel özellik: JavaScript'te bir ref'e .value üzerinden erişirsiniz; şablonda Vue onu otomatik olarak açar. Betikte .value'yu unutmak en yaygın başlangıç hatası.
<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 yalnızca nesneler/diziler üzerinde çalışır (primitifler değil) ve özellikleri doğrudan kullanırsınız.
let state = reactive({ count: 0 });
state = { count: 5 }; // ❌ breaks reactivity (lost the reactive proxy)
const { count } = state; // ❌ destructuring loses reactivity
Bir reactive nesneyi yeniden atamak veya özelliklerini destructure etmek onları reaktiviteden ayırır — sık görülen bir sorun. ref bu sorunu yaşamaz (.value'yu yeniden atarsınız).
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)
Birçok ekip tutarlılık için ref'i her yerde standardize eder.
ref ve reactive Vue 3'ün Composition API durumunun temelini oluştururlar.
ref'in betikte .value'ye ihtiyaç duyması (şablonlarda otomatik olarak açılır) ve reactive'in yeniden atama/destructuring'de reaktiviteyi kaybetmesi, Vue'deki en yaygın iki reaktivite hatasını engeller.