Vue 3 reaktivite: ref, reactive, computed, watch ve nextTick

Reaktivite sistemi neyi otomatikleştirir?

Reaktivite, bir veri değiştiğinde onu kullanan her şeyin kendiliğinden güncellenmesidir. Vue 3'te bir değeri ekranda gösteriyorsanız ve sonra değiştiriyorsanız, DOM'u elle güncellemezsiniz; Vue değişikliği fark eder ve yalnızca etkilenen bileşenleri yeniden çizer. Bu, "durum değişir, arayüz buna göre yeniden oluşur" modelidir.

Bunun çalışması için Vue'nun hangi verinin nerede okunduğunu bilmesi gerekir. Sistemin gücü ve tuzakları da buradan gelir: Vue yalnızca kendi reaktif sarmalayıcılarından geçen okuma ve yazmaları izleyebilir.

Nasıl çalışır: izleme ve tetikleme

Vue dokümantasyonu mekanizmayı şöyle açıklar: Bir bileşen ilk kez çizilirken kullandığı her ref izlenir. Sonra bir ref değiştiğinde, onu izleyen bileşenler yeniden çizilir. Standart JavaScript'te sıradan bir değişkenin okunması ya da yazılması yakalanamaz; bu yüzden Vue, özellik okuma ve yazma işlemlerini araya girerek yakalar.

ref için bu, .value özelliğinin okunurken izleme, yazılırken tetikleme yapan bir erişimci (getter ve setter) olmasıdır. Kavramsal olarak şöyle düşünülebilir:

const sayac = { _deger: null, get value() { izle(); return this._deger }, set value(yeni) { this._deger = yeni; tetikle() } }

Bu yalnızca açıklama içindir; gerçek gerçekleştirim farklıdır. reactive nesneler ise JavaScript Proxy'leriyle sarılır; nesnenin özellikleri okunurken izlenir, yazılırken tetiklenir. Proxy'nin özelliği, sonradan eklenen özellikleri de yakalayabilmesidir.

ref ve reactive: ne zaman hangisi?

ref tek bir değeri bir .value özelliği içinde taşır ve her tipten değer alabilir. Nesne ya da dizi koyarsanız bunlar derinlemesine reaktif olur: iç içe özellikleri de izlenir. reactive ise doğrudan nesneyi sarar, .value gerektirmez ama bazı sınırlamaları vardır.

reactive sınırlamaları: yalnızca nesne tipleriyle çalışır; kimlik değişimi sorun çıkarır, yani değişkene yeni bir nesne atarsanız eski reaktif bağ kopar; özelliklerini ayrı değişkenlere çıkarırsanız (destructuring) reaktiflik kaybolur. Bu yüzden resmî öneri ref'i varsayılan seçmek, nesne içeriğini reaktif tutarak ayrıştırmak gerektiğinde toRefs ile ref'lere dönüştürmektir:

import { reactive, toRefs } from 'vue'

const durum = reactive({ ad: '', sehir: '' }) const { ad, sehir } = toRefs(durum)

Böylece ad ve sehir, durum nesnesine bağlı kalan ref'ler olur; birinde yapılan değişiklik diğerinde görünür.

computed: önbellekli türetilmiş değer

computed, bağımlı olduğu reaktif değerler değişmedikçe yeniden hesaplanmaz; sonucunu önbellekte tutar. Bu, aynı hesaplamayı şablonda birçok yerde kullanıyorsanız fark yaratır. Metot ise her çağrıldığında çalışır.

const sepet = ref([{ ad: 'Defter', secili: true }]) const seciliSayisi = computed(() => sepet.value.filter(kalem => kalem.secili).length )

Burada seciliSayisi, sepet içeriği değişince güncellenir, değişmediği sürece aynı değeri döner. computed içinde yan etki yapmayın (istek gönderme, ref'e yazma); yan etkiler için watch vardır. Hesaplanan değer salt okunurdur; değiştirmek isterseniz yazılabilir computed tanımlamak gerekir ve bu nadir kullanılır.

watch ve watchEffect: yan etkiye tepki

Veri değişince bir iş yapmanız gerekiyorsa (sunucuya istek, yerel depoya yazma) watch kullanılır. İzlediğiniz kaynağı ve geri çağrıyı açıkça yazarsınız; geri çağrı yeni ve eski değeri alır.

watch(sehir, async (yeni, eski) => { ilceler.value = await ilceleriGetir(yeni) })

watchEffect ise geri çağrısında kullandığınız bütün reaktif değerleri otomatik izler ve ilk çalıştırmada hemen çalışır. Hangi değerlerin etkili olduğunu elle yazmaktan kaçınmak istediğinizde uygundur; ama bağımlılıkların neler olduğu okurken daha az görünür olur. Asenkron geri çağrılarda eski isteğin sonucu yenisinin üzerine yazmasın diye temizleme işlevinden yararlanın.

DOM güncellemesinin zamanlaması: nextTick

Durumu değiştirdiğinizde DOM hemen güncellenmez; Vue güncellemeleri toplar ve bir sonraki döngüde uygular. Bu nedenle bir ref'i değiştirip hemen ardından DOM'dan yeni durumu okumaya çalışırsanız eski görüntüyü bulursunuz. Güncel DOM'a ihtiyaç duyduğunuzda nextTick kullanılır:

import { nextTick } from 'vue'

async function ekle() { maddeler.value.push(yeniMadde.value) await nextTick() listeElemani.value.scrollTop = listeElemani.value.scrollHeight }

Örnek, listeye madde ekledikten sonra listeyi en alta kaydırır. nextTick olmasaydı kaydırma, yeni madde çizilmeden önce hesaplanır ve yanlış konuma giderdi. Bu davranış bir hata değil, performans için yapılmış bir toplu güncellemedir.

Sık yapılan hatalar ve nasıl yakalanır

• Scriptte .value yazmamak: bir ref'e değer atamak yerine ref'in kendisini ezmek, bağı koparır.
• reactive nesneye yeni nesne atamak: durum = yeniNesne yerine Object.assign(durum, yeniNesne) ya da ref kullanın.
• Destructuring: reactive ya da prop nesnesinin özelliklerini toRefs olmadan çıkarmak.
• Dizi ve koleksiyonlarda ref açılımı: reactive dizi içindeki ref'ler otomatik açılmaz; dokümantasyonda bu uyarı özel olarak belirtilir.
• Büyük, değişmeyen veriyi derin reaktif yapmak: Çok büyük bir listeyi ref içine koymak maliyetlidir; yalnızca bağlantısı değişecekse shallowRef daha uygundur.
• Yan etkiyi computed içine yazmak: Hesaplamalar saf kalmalıdır.

Bir şeyin neden güncellenmediğini anlamak için, değişkenin gerçekten bir ref ya da reactive olup olmadığını konsolda kontrol edin; sıradan bir değişken olduğu ortaya çıkarsa sorun budur. Vue geliştirici araçlarında bileşenin durumunu inceleyip değerin değişip değişmediğine bakmak da yardımcı olur.

Mindset programlarında nerede çalışılır?

Vue.js 3 ve Composition API ile Uygulama Geliştirme eğitiminin ilk modülü reaktivite sistemi ve temelleri ele alır; sonraki modüller bileşen tasarımı, kompozisyon fonksiyonları, durum yönetimi, formlar ve performansa geçer. Bu sıralama, reaktivitenin neden kritik olduğunu gösterir: sonraki her konu, reaktif bağların nasıl çalıştığına dayanır.

Eğitim, Vue'ya yeni başlayan ya da Options API'den Composition API'ye geçen ön yüz geliştiricileri için uygundur. Bir ekipte reaktivite hatalarının sıkça yaşandığı bir kod tabanı varsa, ekibe özel bir inceleme çalıştayı kurumsal eğitim talebi üzerinden planlanabilir.