Ինչպես է աշխատում ռեակտիվությունը Vue.js-ում?

Vue.js- ի ռեակցիվությունը հիմնված է "наблюдатель" (Observer) օրինակակի վրա:

Երբ Vue-ի օրինակ ստեղծվում է, այն անցնում է data օբյեկտի բոլոր հատկություններով և վերածում դրանք getter և setter-ների Object.defineProperty-ի միջոցով Vue 2-ում կամ Proxy-ի միջոցով Vue 3-ում:

Vue 2:

• Երբ մուտքագրվում է հատկություն (getter), Vue հետևում է, թե որ կոմպոնենտն է այն օգտագործում:
• Երբ հատկությունը փոխվում է (setter), Vue տեղեկացնում է բոլոր կոմպոնենտներին, որոնք այն հետևել են, որ անհրաժեշտ է թարմացնել (վերաներկել շաբլոնը):

Vue 3:

• Օգտագործում է Proxy՝ բոլոր օբյեկտի գործողությունները (հավելում, հեռացում, փոփոխություն) բռնելու համար, ապահովելով ավելի ամբողջական ռեակցիվություն, քան Vue 2-ը:
• Proxy-ի շնորհիվ Vue 3-ի ռեակցիվությունը չի ունենում Vue 2-ի սահմանափակումներ (չի պահանջվում $set նոր հատկություններ ավելացնելու համար):

Ռեակցիվության հիմնական բաղադրիչները:

• Observer: Փոխում է տվյալների հատկությունները getter և setter-ների, կամ օգտագործում է Proxy Vue 3-ում:
• Dep (Dependency): Օբյեկտ, որը կապված է յուրաքանչյուր ռեակցիվ հատկության հետ և պահում է կախված Watcher-ների ցուցակը:
• Watcher: Ներկայացնում է կոմպոնենտը, հաշվարկվող հատկությունը կամ watcher-ները, որոնք կախված են ռեակցիվ տվյալներից: Երբ տվյալները փոխվում են, Watcher-ները տեղեկացվում են և գործարկում համապատասխան գործողությունը (օրինակ՝ կոմպոնենտի վերաարտադրում):

Օրինակ (Vue 2):

// Ներքին իրականացում (պարզեցված)
function defineReactive(obj, key, val) {
  let dep = new Dep(); // Ստեղծում ենք Dep-ը հատկության համար

  Object.defineProperty(obj, key, {
    enumerable: true,
    configurable: true,
    get: function reactiveGetter() {
      // Եթե կա գլոբալ Watcher (կամ երբ նկարում է կոմպոնենտը)
      if (Dep.target) {
        dep.depend(); // Ավելացնում ենք Watcher- ը Dep-ի կախվածությունների ցանկին
      }
      return val;
    },
    set: function reactiveSetter(newVal) {
      if (newVal === val) return;
      val = newVal;
      dep.notify(); // Հաղորդում բոլոր կախված Watcher-ներին
    }
  });
}

// Ինչպես է դա wygląda կոմպոնենտում
new Vue({
  data: {
    message: 'Hello' // defineReactive կկիրառվի message-ի վրա
  },
  template: '<div>{{ message }}</div>' // Երբ մուտքագրվում է message, այս template-ի Watcher- ը կավելանա Dep-ի մեջ message-ի համար
});