Reaktiviteyi Anlayalım.
Vue'da ekrandaki değerler, sen farkında bile olmadan kendini günceller. Fakat bu sistemin nasıl işlediğini anlamadan, “neden .value kullanıyoruz?” ya da “neden reactive içinde değişiklik algılanmadı?” gibi sorularla baş başa kalmak kaçınılmazdır.
Bu yazıda ref, reactive ve toRefs arasındaki farkı, gerçek örneklerle, Vue’nun reaktivite motorunun (Proxy tabanlı sistemin) iç mantığıyla birlikte ele alıyoruz.
Vue 3’ün Kalbi: Proxy Tabanlı Reaktivite
Vue 3, eskiObject.defineProperty tabanlı sistemden vazgeçip Proxy API kullanıyor. Bu sayede bir nesnedeki tüm property erişimlerini izleyip, bağımlı bileşenleri sadece gerektiğinde yeniden render ediyor.Yani Vue şu mantıkla çalışıyor:
const state = reactive({ count: 0 })
state.count++ // Proxy “aha değişti!” der
Arka planda,
effect() adı verilen bir izleyici (watcher) bağımlılıkları toplar ve değişiklik olduğunda ilgili render’ı tetikler.ref Nedir?
ref, ilkel (primitive) değerleri reaktif hale getirir. Vue’da number, string, boolean gibi türler doğrudan izlenemez; bu yüzden bir “kutu” içine alınır.import { ref } from 'vue'
const count = ref(0)
console.log(count.value) // 0
count.value++
.value aslında Proxy’nin kendisine erişim kapısıdır. Template içinde bu .value otomatik olarak açılır, yani şunu yazmak yeterlidir:<p>{{ count }}</p>
.value’yı yazmak zorundayız.💡 İpucu: ref her zaman tek bir değer içindir. Nesne tutacaksa reactive tercih et.
reactive Nedir?
reactive nesne ve array gibi karmaşık yapıları kapsar. Proxy, her property değişikliğini takip eder:const user = reactive({
name: 'Cansu',
age: 28
})
user.age++ // reactive proxy çalışır
reactive içine ref koyarsan Vue bunları unwrap (çözümleme) eder. Yani user.age.value gibi yazman gerekmez; Vue otomatik .value’yu açar.reactive’in Sınırlamaları
reactivesadece ilk katmanı izler; derin nested yapılar otomatik olarak proxylanmaz.- Destructuring yaptığında reaktivite kaybolur.
const state = reactive({ x: 1, y: 2 })
const { x } = state
x++ // artık reaktif değil!
toRefs() giriyor 👇toRefs() -- Reaktiviteyi Koruyarak Destructure Etmek
toRefs, bir reactive nesneyi ref’lere dönüştürür, böylece destructure ettiğinde bile reaktivite kaybolmaz.import { reactive, toRefs } from 'vue'
const state = reactive({ x: 1, y: 2 })
const { x, y } = toRefs(state)
x.value++ // hem x hem state.x güncellenir!
...spread ederken veya Composition API fonksiyonlarına parametre olarak gönderirken reaktivite bozulmaz.Derinleşelim: Reaktivite Akışı
Vue şu adımları izler:- Proxy izleme başlatır (
track()). - Getter çağrıldığında bağımlılık eklenir.
- Setter çağrıldığında ilgili efekt tetiklenir (
trigger()). - Template render yeniden hesaplanır.
ref bir tek değer deposu, reactive bir proxy kapsayıcı, toRefs ise bir köprü gibidir.Ne Zaman Hangisini Kullanmalı?
| Durum | Kullan | Neden |
|---|---|---|
| Tek bir sayısal/metin değer | ref | Basit ve performanslı |
| Objeler / array | reactive | Proxy her property’i izler |
| Destructuring gerekiyorsa | toRefs | Reaktiviteyi korur |
| Bir composable’dan dışarı state dönerken | toRefs | Reaktif nesne bileşenle uyumlu olur |
Bonus: shallowRef, shallowReactive
Vue, performans için “shallow” versiyonlar da sunar. Bunlar yalnızca ilk katmanı izler, derin nesneleri proxylemez. Büyük veri listelerinde FPS düşüşünü önlemek için kullanışlıdır.import { shallowReactive } from 'vue'
const table = shallowReactive({ rows: [] }) // sadece rows property’si izlenir
Sonuç
ref, reactive ve toRefs’ün farkını anlamak, Vue’da “nasıl olur da bir değişiklik ekrana yansımadı?” sorusunun yanıtıdır. Vue’nun reaktivite sistemi Proxy tabanlı bir orkestradır -- her değişiklik, sadece etkilenen bileşeni günceller.Kısaca:
ref→ tek değer kutusureactive→ proxy sarmalayıcıtoRefs→ destructure güvenlik ağı
Bunları doğru yerde kullanmak, hem performansı hem okunabilirliği zirveye taşır.