通俗易懂的 Vue - Computed 原理（Watcher and Dep）

大家好，新人一个，初次写博客还请大家多多关照。

对于Vue的响应式，想必大家都有所了解，在Vue响应式数据中，computed 是比较特殊的响应式数据，它们可以监听使用到的数据，数据改变 computed 的数据也会重新计算。

今天主要是讨论 computed 实现原理。 computed 在内部主要是运用 Watcher 和 Dep 构造函数进行收集依赖和派发更新。

咱们先来看看 Watcher 和 Dep 源码。

  var uid = 0;

  /**
   * dep 就是用来给每个数据做个标记，可以用来收集数据和派发更新
   */
  var Dep = function Dep () {
    this.id = uid++; 
//给每一个 Dep 打一个标记。这里需要说明一下，vm中data的每个数据进行初始化的时候都会调用this.dep = new Dep(),每一个数据都会有dep属性。
//（通过Observer 构造函数进行数据初始化，这里就不多说了，大家感兴趣可以看一下源码）
    this.subs = []; // 这个subs收集的是watcher，派发更新的时候遍历每个watcher调用update方法
  };

  Dep.prototype.addSub = function addSub (sub) {
    this.subs.push(sub);//这个方式是用来收集watcher的（每个computed构建出来的Watcher实例）
  };

  Dep.prototype.depend = function depend () {
    if (Dep.target) {
      Dep.target.addDep(this);  // 这里的方法是Watcher原型上的addDep方法，请看下面
    }
  };

  Watcher.prototype.addDep = function addDep (dep) {
    var id = dep.id;
    if (!this.depIds.has(id)) {
      this.depIds.add(id); //将依赖的每个dep，添加到 watcher 的 deps集合中，完成数据的收集
      this.depIds.push(dep);
    }
  };

  Dep.prototype.notify = function notify () { 
// 用来出发watcher的更新，每当数据改变，每个数据的dep就会出发motify方法，将收集的watcher逐个进行数据更新，
//这里就是为什么computed知道依赖改变了，然后就会自动更新。其实不是computed知道依赖改变的，而是依赖改变以后出发computed更新。
    for (var i = 0, l = subs.length; i < l; i++) {
      subs[i].update();
    }
  };

  Dep.target = null;
  var targetStack = [];

  function pushTarget (target) {
    targetStack.push(target); // 将 Dep 原型 上的 Target 设置为 watcher
    Dep.target = target;
  }

  function popTarget () {
    targetStack.pop();
    Dep.target = targetStack[targetStack.length - 1];
  }

  // vm 是 Vue 实例
  // expOrFn 是传过来的数据 get 函数
  // cb 是回调函数

  var Watcher = function Watcher (vm,expOrFn,cb,) {
    this.vm = vm;
    this.cb = cb;
    this.id = ++uid$2; // uid for batching
    this.deps = []; // deps 是用来收集  依赖数据节点  的集合
    this.depIds = new _Set();
    this.value = this.get();  // 首次执行get方法(get也就是expOrFn)，初次收集依赖是在这个环节
  }; 


  Watcher.prototype.get = function get () {
    pushTarget(this); // 将 Dep 的 target 设置为当前 watcher，这个函数在 Dep 那块最后面
    var value;
    var vm = this.vm;
    value = this.getter.call(vm, vm);
    popTarget();
    this.cleanupDeps(); 将 Dep 的 target 设置为当前 空，这个函数我会放在后面
    }
    return value
  };

  /**
   * 添加依赖的方法，重点！！！ 着重看一下 （我进行了一些简化，便于理解）
   */
  Watcher.prototype.addDep = function addDep (dep) {
    var id = dep.id;
    if (!this.depIds.has(id)) {
      this.depIds.add(id);
      this.depIds.push(dep);
    }
    if (!this.depIds.has(id)) {
        dep.addSub(this);
      } //这步是将自身（也就是watcher）添加到dep中的watcher集合，派发数据更新时用到
  };

  /**
   * 更新数据的方法，在派发更新的时候会用到。 computed 更新数据的时候，用 dep 的 notify 方法进 
   * 行更新数据，更新数据主要调用的是 run 方法
   */
  Watcher.prototype.update = function update () {
    /* istanbul ignore else */
    if (this.lazy) {
      this.dirty = true;
    } else if (this.sync) {
      this.run();
    } else {
      queueWatcher(this);
    }
  };

  /**
   * 在这个阶段主要是运行get方法，拿到数据 (简化以后的代码)
   */
  Watcher.prototype.run = function run () {
    if (this.active) {
      var value = this.get();
      this.value = value 
    }
  };

  /**
   * 深度收集依赖，computed 可以收集 computed 数据就是依靠这个方法
   */
  Watcher.prototype.depend = function depend () {
    console.log(this.deps)
    var i = this.deps.length;
    while (i--) {
      this.deps[i].depend(); //注意这里的 depend 方法是 Dep 原型上的方法，不是Watcher 的法
    }
  };

大家可以仔细看一下我的注释，进行了每个步骤的描述，当然都只是我自己的理解，有不对的地方还请大家多多指教。

现在来细说一下收集依赖的流程。当初始化Vue实例以后，在初始化 computed 阶段，vue 会对每个 computed 进行运算和收集依赖。当 computed 初始化的时候会依靠当前的 computed 生成一个 Watcher，并且将 getter 方法传入。

function initComputed (vm, computed) {
    var watchers = vm._computedWatchers = Object.create(null);
    for (var key in computed) {
      var userDef = computed[key];
      var getter = typeof userDef === 'function' ? userDef : userDef.get;
      if (getter == null) {
        warn(
          ("Getter is missing for computed property \"" + key + "\"."),
          vm
        );
      }
        watchers[key] = new Watcher(
          vm,
          getter || noop,
          noop,
          computedWatcherOptions
        );
      }
    )
}

这时候已经有了watcher实例。当 watcher 初始化，会调用 get方法（收集依赖在这里），

Watcher.prototype.get = function get () {
    pushTarget(this); // 将 Dep 的 target 设置为当前 watcher，这个函数在 Dep 那块最后面
    var value;
    var vm = this.vm;
    value = this.getter.call(vm, vm);
    popTarget();
    this.cleanupDeps(); 将 Dep 的 target 设置为当前 空，这个函数我会放在后面
    }
    return value
  };

get执行得时候会调用pushTarget方法（这个方法就是将当前的全局的 Dep.target 设置成当前运行的 watcher ），然后会进行 getter()，getter() 执行的时候会触发每个数据的 get 方法，请看get源码

Object.defineProperty(obj, key, {
      enumerable: true,
      configurable: true,
      get: function reactiveGetter () {
        var value = getter ? getter.call(obj) : val;
        if (Dep.target) { //判断当前执行是否为watcher，也可以说是否为computed运算的数据
          dep.depend(); // 收集到watcher里面的deps里面
          if (childOb) {
            childOb.dep.depend();
            if (Array.isArray(value)) {
              dependArray(value);
            }
          }
        }
        return value
      })

这里的 get 方法会首先判断是否有 Dep.target，这个判断最终目的是判断当前获取数据的是否是watcher，如果是，就会调用 Dep 的 depend 方法进行收集，这样 watcher 就会把运算的每个数据的dep收集到自己的 deps 属性中，完成了数据依赖收集。

咱们再来细说一下Dep 的 depend 方法，这个方法主要是调用的 Watcher 里面的 addDep方法，这个方法进行的是双向数据收集，也就是说 watcher 会收集 deps，同样 dep 也会收集 watcher 集合，存到dep 的 subs 属性中，每当 dep 的数据更新时，就会将subs的每个 watcher 进行 update ，这样就完成了数据更新，这就是 computed 的实现原理。

简单点说，就是 computed 在运行的时候，首先将全局的 Dep.target 设置当前 computed 的 watcher，然后在运行 computed 代码，里面用到的数据会调用它们自己的 get 方法，在 get 方法里，他们会将自己的 dep.id 存到当前的 Dep.target 里，然后还要将当前的 Dep.target（也就是当前的 watcher）存到自己的 dep.subs 属性中，每当自己数据更新触发 set 方法，就会把自己 dep.subs 中的每个watcher 拿出来进行数据更新，从而更新 computed 。

通俗易懂的 Vue - Computed 原理（Watcher and Dep）

猜你喜欢