Чӣ гуна реактивӣ дар Vue.js кор мекунад?

Реактивност во Vue.js се базира на моделот на "наблюдател" (Observer).

Кога се создава инстанца на Vue, таа ги преминува сите својства во објектот data и ги претвора во геттери и сеттери со користење на Object.defineProperty во Vue 2 или Proxy во Vue 3.

Vue 2:

• При пристап до својството (геттер), Vue следи кој компонент го користи.
• При промена на својството (сеттер), Vue известува сите компоненти кои го следеле за потребата од ажурирање (повторно да ја прикаже шаблоната).

Vue 3:

• Користи Proxy за да ги пресретне сите операции со објектот (додавање, бришење својства, промена на вредности и тн.), обезбедувајќи поцелосна реактивност во споредба со Vue 2.
• Благодарение на Proxy, реактивноста на Vue 3 нема ограничувања како Vue 2 (не е потребен $set за додавање нови својства).

Клучни компоненти на реактивноста:

• Observer: Претвора својства на податоците во геттери/сеттери (Vue 2) или ги обработува со помош на Proxy (Vue 3).
• Dep (Dependency): Објект поврзан со секоја реактивна својство, кој чува список на зависни Watcher-и.
• Watcher: Представува компонента, пресметувана својство или watchers, кои зависат од реактивните податоци. Кога податоците се менуваат, 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-и
    }
  });
}

// Како изгледа во компонентата
new Vue({
  data: {
    message: 'Hello' // defineReactive ќе се примени на message
  },
  template: '<div>{{ message }}</div>' // При пристап до message, Watcher-от на овој template ќе се додаде во Dep за message
});