Vue 中 Dep 和 Observer 的用法详解

Vue 中响应式系统利用了订阅发布模式来实现基本的逻辑。本文将介绍其中的两个重要角色，他们就是Dep和Observer。其中Observer 是观察者和 Dep是订阅收集和发布者。另外watcher是作为订阅者的角色。本文将重点将Observer和Dep。

一：Observer

vue 通过Observer 构造函数，为响应式变量添加访问和赋值的get set的回调。

var Observer = function Observer (value) {
    this.value = value;
    this.dep = new Dep();
    this.vmCount = 0;
    def(value, '__ob__', this);
    if (Array.isArray(value)) {
      if (hasProto) {
        protoAugment(value, arrayMethods);
      } else {
        copyAugment(value, arrayMethods, arrayKeys);
      }
      this.observeArray(value);
    } else {
      this.walk(value); // 这是非数组值添加get set 回调
    }
  };
           

批量为obj上的key添加get set的回调

Observer.prototype.walk = function walk (obj) {
    var keys = Object.keys(obj);
    for (var i = 0; i < keys.length; i++) {
      defineReactive$$1(obj, keys[i]);
    }
  };
           

// 这个是为obj上的key添加get set方法的核心逻辑
  function defineReactive$$1 (
    obj,
    key,
    val,
    customSetter,
    shallow
  ) {
    var dep = new Dep();

    var property = Object.getOwnPropertyDescriptor(obj, key);
    if (property && property.configurable === false) {
      return
    }

    // cater for pre-defined getter/setters
    var getter = property && property.get;
    var setter = property && property.set;
    if ((!getter || setter) && arguments.length === 2) {
      val = obj[key];
    }

    var childOb = !shallow && observe(val);
    Object.defineProperty(obj, key, {
      enumerable: true,
      configurable: true,
      get: function reactiveGetter () {
         // 省略N行
      },
      set: function reactiveSetter (newVal) {
       // 省略N行
      }
    });
  }
           

有了这一层，当数据获取和修改就会触发这里的get 和 set

二：Dep 依赖关系

变量能够响应数据的获取和修改对于一个透明处理dom更新的框架来说是不够的，框架还需要处理变量和更新dom的watcher的依赖关系。Dep就是为了干这个事情的。

在之前的文章里，介绍过Watcher，vue中的组件在挂载前，都会基于组件的render函数，生成一个Watcher实例，并执行render函数来进行渲染

渲染dom的时候我们需要读取变量，这个时候就会触发我们上一步Observer为每个变量里量身定做的get方法。那vue在get里做了什么事情呢？请看下面一段代码中的中文注释：

function defineReactive$$1 (
    obj,
    key,
    val,
    customSetter,
    shallow
  ) {
    var dep = new Dep(); // 创建一个Dep实例

    var property = Object.getOwnPropertyDescriptor(obj, key);
    if (property && property.configurable === false) {
      return
    }

    // cater for pre-defined getter/setters
    var getter = property && property.get;
    var setter = property && property.set;
    if ((!getter || setter) && arguments.length === 2) {
      val = obj[key];
    }

    var childOb = !shallow && observe(val);
    Object.defineProperty(obj, key, {
      enumerable: true,
      configurable: true,
      get: function reactiveGetter () {
        var value = getter ? getter.call(obj) : val;
        if (Dep.target) {
          //在此处将当前watcher加入到dep中
          dep.depend(); 
          if (childOb) {
            childOb.dep.depend();
            if (Array.isArray(value)) {
              dependArray(value);
            }
          }
        }
        return value
      },
           

此处有一个Dep.target 存在的条件判断，什么是Dep.target

Dep.target = null;
           

当watcher实例创建完，默认回去调用get方法来渲染组件界面

这个时候会通过pushTarget(this) 将当前watcher设置到Dep.target上去。

Watcher.prototype.get = function get () {
   // 设置当前watcher到全局变量上去
    pushTarget(this);
    var value;
    // 省略N行代码
    return value
  };
           

pushTarget的具体实现

function pushTarget (target) {
    targetStack.push(target);
    Dep.target = target;
  }
           

这一步完成后，在调用render函数触发dom中响应式变量的get的时候

下面的代码就能够执行了

if (Dep.target) {
          //在此处将当前watcher加入到dep中
          dep.depend(); 
           

dep.depend 干了啥呢？

接着看：

Dep.prototype.depend = function depend () {
    // Dep.target 对应的就是上面的全局变量里的watcher
    if (Dep.target) {
      Dep.target.addDep(this);
    }
  };
           

也就是调用了watcher.addDep(this)

Watcher.prototype.addDep = function addDep (dep) {
    var id = dep.id;
    if (!this.newDepIds.has(id)) {
      this.newDepIds.add(id);
      //  会在watcher的实际例子里维护一个所以订阅的dep的数组
      this.newDeps.push(dep); 
      if (!this.depIds.has(id)) {
        dep.addSub(this); 
      }
    }
  };
  Dep.prototype.addSub = function addSub (sub) {
  // 绕了一大圈，最终就是把watcher 塞到dep实例的subs数组里了。
    this.subs.push(sub);
  };
           

到此，dom的渲染订阅者和数据的观察发布者就关联上了。

等用户修改数据的时候，触发为响应数据设计的set 回调函数

set: function reactiveSetter (newVal) {
        var value = getter ? getter.call(obj) : val;
        /* eslint-disable no-self-compare */
        if (newVal === value || (newVal !== newVal && value !== value)) {
          return
        }
        /* eslint-enable no-self-compare */
        if (customSetter) {
          customSetter();
        }
        // #7981: for accessor properties without setter
        if (getter && !setter) { return }
        if (setter) {
          setter.call(obj, newVal);
        } else {
          val = newVal;
        }
        childOb = !shallow && observe(newVal);
        // 重点看这里，这里是发布者发布数据变化的消息
        // dep通知所有依赖的watcher
        dep.notify();
      }
    });
           

dep.notify做了啥事呢？

Dep.prototype.notify = function notify () {
    // stabilize the subscriber list first
    // subs就是上面get回调里，我们用来加入watcher依赖的数组
    var subs = this.subs.slice(); 
    if (!config.async) {
      // subs aren't sorted in scheduler if not running async
      // we need to sort them now to make sure they fire in correct
      // order
      subs.sort(function (a, b) { return a.id - b.id; });
    }
    for (var i = 0, l = subs.length; i < l; i++) {
    //  遍历调用watcher的update方法
      subs[i].update(); 
    }
  };

           

Dep 的构造函数和其他实例方法：

// Dep的构造函数
  var Dep = function Dep () {
    this.id = uid++;
    this.subs = [];
  };
//  取消订阅
  Dep.prototype.removeSub = function removeSub (sub) {
    remove(this.subs, sub);
  };

           

其他相关

// 移除deps数组里的不在newDeps里的老的依赖，将之前newDeps收集的dep依赖丢给this.deps
  Watcher.prototype.cleanupDeps = function cleanupDeps () {
    var i = this.deps.length;
    while (i--) {
      var dep = this.deps[i];
      if (!this.newDepIds.has(dep.id)) {
        dep.removeSub(this);
      }
    }
    var tmp = this.depIds;
    this.depIds = this.newDepIds;
    this.newDepIds = tmp;
    this.newDepIds.clear();
    tmp = this.deps;
    this.deps = this.newDeps;
    this.newDeps = tmp;
    this.newDeps.length = 0;
  };