Vue.js-də reaktivlik necə işləyir?

Vue.js-də reaktivlik "gözətçi" (Observer) nümunəsinə əsaslanır.

Vue nümunəsi yaradıldıqda, o, data obyektindəki bütün xüsusiyyətləri keçir və onları Object.defineProperty istifadə edərək Vue 2-də getter və setter-lara və ya Vue 3-də Proxy-yə çevirir.

Vue 2:

• Xüsusiyyətə (getter) daxil olunduqda, Vue hansı komponentin onu istifadə etdiyini izləyir.
• Xüsusiyyət dəyişdirildikdə (setter), Vue onu izləyən bütün komponentləri xəbərdar edir və yenidən çəkmə (şablonu yenidən çizmək) üçün xəbərdarlıq edir.

Vue 3:

• Proxy istifadə edərək obyekt üzərindəki bütün əməliyyatları (xüsusiyyət əlavə etmək, silmək, dəyərləri dəyişdirmək və s.) ələ keçirir və Vue 2 ilə müqayisədə daha tam reaktivlik təmin edir.
• Proxy sayəsində, Vue 3-də reaktivlik Vue 2-nin məhdudiyyətlərinə malik deyil (yeni xüsusiyyətlər əlavə etmək üçün $set lazım deyil).

Reaktivliyin əsas komponentləri:

• Observer: Data xüsusiyyətlərini getter və setter-lara çevirir (Vue 2) və ya onları Proxy ilə idarə edir (Vue 3).
• Dep (Dəyişiklik): Hər bir reaktiv xüsusiyyətlə əlaqəli obyekt və asılı olan Watcher-ların siyahısını saxlayır.
• Watcher: Bir komponenti, hesablanan xüsusiyyəti və ya izləyiciləri təmsil edir, onlar reaktiv məlumatlara bağlıdır. Məlumatlar dəyişdikdə, Watcher xəbərdar edilir və müvafiq əməliyyatı yerinə yetirir (məsələn, komponenti yenidən çəkmək).

Nümunə (Vue 2):

// Daxili həyata keçirmə (sadələşdirilmiş)
function defineReactive(obj, key, val) {
  let dep = new Dep(); // Xüsusiyyət üçün Dep yaradılır

  Object.defineProperty(obj, key, {
    enumerable: true,
    configurable: true,
    get: function reactiveGetter() {
      // Əgər qlobal Watcher mövcuddursa (komponentin render olunması zamanı)
      if (Dep.target) {
        dep.depend(); // Watcher-ı Dep-nin asılılıqlar siyahısına əlavə et
      }
      return val;
    },
    set: function reactiveSetter(newVal) {
      if (newVal === val) return;
      val = newVal;
      dep.notify(); // Bütün asılı Watcher-ları xəbərdar et
    }
  });
}

// Bu komponentdə necə görünür
new Vue({
  data: {
    message: 'Hello' // defineReactive message-ə tətbiq olunacaq
  },
  template: '<div>{{ message }}</div>' // Message-ə daxil olarkən, bu şablonun Watcher-i Dep message-ə əlavə olunacaq
});