Vue.js'da reaktivlik qanday ishlaydi?

Vue.js-da reaktivlik "observator" (Observer) naqshiga asoslangan.

Vue instansiyasi yaratilganda, u data obyektdagi barcha xususiyatlarni aylanib chiqadi va ularni Object.defineProperty yordamida Vue 2 da yoki Proxy yordamida Vue 3 da getter va setterlarga aylantiradi.

Vue 2:

• Xususiyatga (getter) kirishda, Vue qaysi komponent uni ishlatayotganini kuzatadi.
• Xususiyat o'zgartirilganda (setter), Vue uni kuzatayotgan barcha komponentlarga yangilanishi (shablonni qayta chizish) uchun xabar beradi.

Vue 3:

• Ob'ekt bilan barcha operatsiyalarni (xususiyat qo'shish, o'chirish, qiymat o'zgartirish va boshqalar) ushlash uchun Proxy dan foydalanadi, bu Vue 2 ga nisbatan yanada to'liq reaktivlikni ta'minlaydi.
• Proxy yordamida, Vue 3 ning reaktivligi Vue 2 ning cheklovlaridan ozod bo'ladi (yangi xususiyatlarni qo'shish uchun $set talab qilinmaydi).

Reaktivlikning asosiy komponentlari:

• Observer: Ma'lumot xususiyatlarini getter va setterlarga aylantiradi (Vue 2) yoki ularni Proxy yordamida boshqaradi (Vue 3).
• Dep (Dependency): Har bir reaktiv xususiyat bilan bog'liq bo'lib, unga bog'liq Watcherlar ro'yxatini saqlaydi.
• Watcher: Komponent, hisoblangan xususiyat yoki watchers bo'lib, ular reaktiv ma'lumotlarga bog'liq. Ma'lumotlar o'zgarganda, Watcher xabardor qilinadi va mos harakatni bajaradi (masalan, komponentni qayta chizish).

Misol (Vue 2):

// Ichki amalga oshirish (soddalashtirilgan)
function defineReactive(obj, key, val) {
  let dep = new Dep(); // Xususiyat uchun Dep yaratamiz

  Object.defineProperty(obj, key, {
    enumerable: true,
    configurable: true,
    get: function reactiveGetter() {
      // Agar global Watcher mavjud bo'lsa (komponentni chizish vaqtida)
      if (Dep.target) {
        dep.depend(); // Watcher'ni Dep ro'yxatiga qo'shish
      }
      return val;
    },
    set: function reactiveSetter(newVal) {
      if (newVal === val) return;
      val = newVal;
      dep.notify(); // Barcha bog'liq Watcherlarni xabardor qilish
    }
  });
}

// Bu komponentda qanday ko'rinadi
new Vue({
  data: {
    message: 'Hello' // defineReactive message ga qo'llaniladi
  },
  template: '<div>{{ message }}</div>' // message ga kirishda, bu template ning Watcher'i Dep message ga qo'shiladi
});