Vue响应式系统的依赖收集追踪原理

订阅者 Dep

首先实现一个订阅者Dep，它的主要作用是用来存放watcher观察者对象

  class Dep {
    constructor () {
    /*用来存放watcher对象的数组*/
      this.subs = [];
    }

    /*在subs中添加一个Watcher对象*/
    addSub (sub) {
      this.subs.push(sub);
    }

    /*通知所有watcher对象更新视图*/
    notify () {
      this.subs.forEach((sub) => {
          sub.update();
      });
    }
  }

观察者 Watcher

  class Watcher {
    constructor () {
      /* 在new一个Watcher对象时将该对象赋值给Dep.target，在get中会用到 */
      Dep.target = this;
    }

    /* 更新视图的方法 */
    update () {
        console.log('视图更新了');
    }
  }
  Dep.target = null;

依赖收集

接下来修改一下defineReactive以及Vue的构造函数，来完成依赖收集。

  function defineReactive(obj, key, val) {
      const dep = new Dep();
      Object.defineProperty(obj, key, {
          enumerable:  true,
          configurable:  true,
          get: function reactiveGetter () {
               /* 将Dep.target（即当前的Watcher对象存入dep的subs中） */
              dep.addSub(Dep.target);
              return val;
          },
          set: function reactiveSetter (newVal) {
              if (newVal === val) {
                return;
              }
              /* 在set的时候触发dep的notify来通知所有的Watcher对象更新视图 */
              dep.notify();
          }
      });
  }
   
  class Vue {
      constructor (options) {
          this._data = options.data;
          observer(this._data);
          /* 新建一个Watcher观察者对象，这时候Dep.target会指向这个Watcher对象 */
          new Watcher();
          /* 在这里模拟render的过程，为了触发test属性的get函数 */
          console.log('render', this._data.test);
      }
   }

小结

首先在observer的过程中会注册get方法，该方法用来进行依赖收集。在它的闭包中会有一个Dep对象，这个对象用来存放Watcher对象的实例。其实依赖收集的过程就是把watcher实例存放到对应的Dep对象中去。get方法可以让当前的watcher对象（Dep.target）存放到它的subs中（通过addSub方法）。在数据发生变化时，set会调用Dep对象的notify方法通知它内部的watcher对象进行视图更新。