Vue.js'de reaktivite nasıl çalışır?

Vue.js'de reaktivlik, "gözlemci" (Observer) desenine dayanır.

Bir Vue örneği oluşturulduğunda, data nesnesindeki tüm özellikleri dolaşır ve bunları Vue 2'de Object.defineProperty veya Vue 3'te Proxy kullanarak getter ve setter'lara dönüştürür.

Vue 2:

• Bir özelliğe (getter) erişildiğinde, Vue hangi bileşenin onu kullandığını izler.
• Bir özellik değiştirildiğinde (setter), Vue onu izleyen tüm bileşenleri bilgilendirir ve güncellemeleri (şablonu yeniden çizme) sağlar.

Vue 3:

• Nesne üzerindeki tüm işlemleri (özellik ekleme, silme, değer değiştirme vb.) yakalamak için Proxy kullanır, bu da Vue 2'ye kıyasla daha kapsamlı bir reaktivite sağlar.
• Proxy sayesinde, Vue 3'te reaktivite Vue 2'deki sınırlamalara sahip değildir (yeni özellikler eklemek için $set gerekmez).

Reaktivitenin temel bileşenleri:

• Observer: Veri özelliklerini getter/setter'lara dönüştürür (Vue 2) veya Proxy ile işler (Vue 3).
• Dep (Bağımlılık): Her reaktif özellik ile ilişkili nesne olup, bağımlı Watcher'ların listesini tutar.
• Watcher: Bir bileşeni, hesaplanan özelliği veya bağımlı olan izleyicileri temsil eder. Veri değiştiğinde, Watcher bilgilendirilir ve uygun işlemi (örneğin, bileşeni yeniden çizme) gerçekleştirir.

Örnek (Vue 2):

// İçsel uygulama (basitleştirilmiş)
function defineReactive(obj, key, val) {
  let dep = new Dep(); // Özellik için Dep oluştur

  Object.defineProperty(obj, key, {
    enumerable: true,
    configurable: true,
    get: function reactiveGetter() {
      // Global bir Watcher (bileşen render edilirken) varsa
      if (Dep.target) {
        dep.depend(); // Watcher'ı Dep'nin bağımlılık listesine ekle
      }
      return val;
    },
    set: function reactiveSetter(newVal) {
      if (newVal === val) return;
      val = newVal;
      dep.notify(); // Tüm bağımlı Watcher'ları bilgilendir
    }
  });
}

// Bir bileşende nasıl görünür
new Vue({
  data: {
    message: 'Hello' // defineReactive, message'e uygulanacak
  },
  template: '<div>{{ message }}</div>' // message'a erişildiğinde, bu şablonun Watcher'ı Dep message'a eklenir
});