vue 响应式数组收集依赖源码解析

数组方法的重写

var arrayProto = Array.prototype;
// 新建一个继承于Array的对象
var arrayMethods = Object.create(arrayProto);

// 数组拥有的方法
var methodsToPatch = [
  'push',
  'pop',
  'shift',
  'unshift',
  'splice',
  'sort',
  'reverse'
];

 methodsToPatch.forEach(function (method) {
 	//通过原方法得到计算结果
    var original = arrayProto[method];
    // 利用Object.defineProperty对方法的执行进行改写
    def(arrayMethods, method, function mutator () {
      var args = [], len = arguments.length;
      while ( len-- ) args[ len ] = arguments[ len ];
      // 执行原数组方法
      var result = original.apply(this, args);
      var ob = this.__ob__;
      var inserted;
      switch (method) {
        case 'push':
        case 'unshift':
          inserted = args;
          break
        case 'splice':
          inserted = args.slice(2);
          break
      }
      //获取传递给数组的参数,如果参数中有数组或对象,也需要进行改写或转换,调用Observer实例上的方法进行递归检查
      if (inserted) { ob.observeArray(inserted); }
      // 因为每个数组对象都有个Obsetver实例,在getter中往这个依赖里收集了Dep.target的watcher,所以调用数组方法的时候需要通知这些watcher更新
      ob.dep.notify();
      return result
    });
  });

function def (obj, key, val, enumerable) {
    Object.defineProperty(obj, key, {
      value: val,
      enumerable: !!enumerable,
      writable: true,
      configurable: true
    });
  }

在访问数组时，不调用原生的数组方法，而是调用改写的方法

var Observer = function Observer (value) {
  this.value = value;
  this.dep = new Dep();
  this.vmCount = 0;
  // 将__ob__属性设置成不可枚举属性。外部无法通过遍历获取。
  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);
  }
}
Observer.prototype.observeArray = function observeArray (items) {
  for (var i = 0, l = items.length; i < l; i++) {
    observe(items[i]);
  }
};

hasProto

• 用来判断当前环境下是否支持__proto__属性

// __proto__属性的判断
var hasProto = '__proto__' in {};

protoAugment、copyAugment

//直接通过原型指向的方式

function protoAugment (target, src) {
  target.__proto__ = src;
}

// 通过数据代理的方式
function copyAugment (target, src, keys) {
  for (var i = 0, l = keys.length; i < l; i++) {
    var key = keys[i];
    def(target, key, src[key]);
  }
}

数组、对象收集依赖

function defineReactive###1() {
  ···
  //当val是数组或对象时,递归检测并返回Observer实例
  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) {
            dep.depend();
            //往对象或数组上的Observer实例的dep中添加watcher
            //这样使得在数组改写的方法中能通过__ob__获取到dep从而获取到watcher,进行调用更新
            if (childOb) {
              childOb.dep.depend();
              if (Array.isArray(value)) {
                dependArray(value);
              }
            }
          }
          return value
        },
        set() {}
}
 

dependArray

• 当defineReactive传递的val是数组或对象时,递归遍历其中的属性,往其中的对象或数组上的__ob__,即Observer实例中的dep添加当前watcher
• 因为observe已经进行了递归检测,所以每个对象上的数组或对象都有__ob__属性,固只需要直接添加watcher即可
• 给每个对象或数组的键添加了watcher还要给对象或数组添加watcher的原因是当进行对象或数组本身的操作时也能调用到收集到的watcher

function dependArray (value) {
    for (var e = (void 0), i = 0, l = value.length; i < l; i++) {
      e = value[i];
      e && e.__ob__ && e.__ob__.dep.depend();
      if (Array.isArray(e)) {
        dependArray(e);
      }
    }
  }