Vue之Dep和Observer的用法及说明

  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 回调
    }
  };

  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行
      }
    });
  }

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 = null;

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

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

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

 Dep.prototype.depend = function depend () {
    // Dep.target 对应的就是上面的全局变量里的watcher
    if (Dep.target) {
      Dep.target.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);
  };

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.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的构造函数
  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;
  };