Kā darbojas reaktivitāte Vue.js?

Reaktivitate Vue.js ir pamato uz "novērotāja" (Observer) paraugā.

Kad tiek izveidota Vue instance, tā pārbauda visas data objekta īpašības un pārvērš tās par gētteri un setteri, izmantojot Object.defineProperty Vue 2, vai Proxy Vue 3.

Vue 2:

• Pie piekļuves īpašībai (gētteris), Vue uzrauga, kurš komponents to izmanto.
• Kad īpašība mainās (setters), Vue informē visus komponentus, kas to uzraudzīja, par nepieciešamību atjaunināt (pārkrāsot šablonu).

Vue 3:

• Izmanto Proxy, lai noķertu visas operācijas ar objektu (pievieno, izdzēš, maina vērtības utt.), nodrošinot pilnīgāku reaktivitāti nekā Vue 2.
• Pateicoties Proxy, Vue 3 reaktivitāte nav ierobežota ar Vue 2 (nav nepieciešams $set jaunu īpašību pievienošanai).

Galvenās reaktivitātes sastāvdaļas:

• Observer: Pārvērš datu īpašības par gētteri un setteri (Vue 2) vai apstrādā tās ar Proxy (Vue 3).
• Dep (Dependency): Objekts, kas ir saistīts ar katru reaktīvo īpašību, un glabā atkarīgo Watcher sarakstu.
• Watcher: Attēlo komponentu, aprēķināmo īpašību vai uzraudzītāju, kas ir atkarīgi no reaktīviem datiem. Kad dati mainās, Watcher tiek informēts un aktivizē atbilstošu darbību (piemēram, komponenta pārkrāsošanu).

Piemērs (Vue 2):

// Iekšējā realizācija (vienkāršota)
function defineReactive(obj, key, val) {
  let dep = new Dep(); // Izveido Dep priekš īpašības

  Object.defineProperty(obj, key, {
    enumerable: true,
    configurable: true,
    get: function reactiveGetter() {
      // Ja ir globālais Watcher (kad tiek zīmēts komponents)
      if (Dep.target) {
        dep.depend(); // Pievieno Watcher Dep atkarību sarakstam
      }
      return val;
    },
    set: function reactiveSetter(newVal) {
      if (newVal === val) return;
      val = newVal;
      dep.notify(); // Informē visus atkarīgos Watcher
    }
  });
}

// Kā tas izskatās komponentē
new Vue({
  data: {
    message: 'Hello' // defineReactive tiks piemērots message
  },
  template: '<div>{{ message }}</div>' // Pie piekļuves message, šī šablona Watcher tiks pievienots Dep message
});