Vue监听数组变化源码解析

// 上一篇中出现的未曾重写的代码，这一篇中不再重复
var Observer = function Observer(value) {
  this.value = value;
  this.dep = new Dep();
  // 如果是数组，则遍历所有元素
  if(Array.isArray(value)) {
    this.observeArray(value);
  } else {
    this.walk(value);
  }
};
Observer.prototype.observeArray = function observeArray(items) {
  // 遍历数组所有元素，对单个元素进行 getter、setter 绑定
  for (var i = 0, l = items.length; i < l; i++) {
    observe(items[i]);
  }
};

function def(obj, key, val, enumerable) {
  Object.defineProperty(obj, key, {
    value: val,
    // 转变为 boole 值，如果不传参，转为 false
    enumerable: !!enumerable,
    writable: true,
    configurable: true
  });
}

var hasProto = '__proto__' in {};
var augment = hasProto "htmlcode">

var arrayPush = {};

(function(method){
  var original = Array.prototype[method];
  arrayPush[method] = function() {
    // this 指向可通过下面的测试看出
    console.log(this);
    return original.apply(this, arguments)
  };
})('push');





var testPush = [];
testPush.__proto__ = arrayPush;
// 通过输出，可以看出上面所述 this 指向的是 testPush
// []
testPush.push(1);
// [1]
testPush.push(2);



伪改写数组原型来监听数组的变化
如官方文档所言，所需监视的只有 push()、pop()、shift()、unshift()、splice()、sort()、reverse() 7 种方法，这 7 种方法有可分为两类：
1、push()、unshift()、splice() 这三种可能会给数组添加新元素的方法；
2、其余的不会新增元素的方法。
为了避免污染全局的 Array，新建一个以 Array.prototype 为原型的对象，而后在这个对象本身附加属性，再把这个新建的对象作为原型或者作为属性添加到 Observer 的 value 中，来达到监视其变化的目的。


var arrayProto = Array.prototype;
var arrayMethods = Object.create(arrayProto);


接着就是遍历需要触发更新的几个方法，依次将其附加到 arrayMethods 上：


['push', 'pop', 'shift', 'unshift', 'splice', 'sort', 'reverse'].forEach(function(method) {
  // 获取原始的数组操作方法
  var original = arrayProto[method];
  // 在 arrayMethods 上新建属性 method，并为 method 指定值（函数）
  // 即改写 arrayMethods 上的同名数组方法
  def(arrayMethods, method, function mutator() {
    var arguments$1 = arguments;

    var i = arguments.length;
    var args = new Array(i);
    // 将伪数组 arguments 转变为数组形式
    // 为何不用 [].slice.call(arguments)？
    while(i--) {
      args[i] = arguments$1[i];
    }
    var result = original.apply(this, args);
    // 因 arrayMethods 是为了作为 Observer 中的 value 的原型或者直接作为属性，所以此处的 this 一般就是指向 Observer 中的 value
    // 当然，还需要修改 Observer，使得其中的 value 有一个指向 Observer 自身的属性，__ob__，以此将两者关联起来
    var ob = this.__ob__;
    // 存放新增的数组元素
    var inserted;
    // 对几个可能有新增元素的方法单独考虑
    switch(method) {
      case 'push':
        inserted = args;
        break;
      case 'unshift':
        inserted = args;
        break;
      case 'splice':
        // splice 方法第三个参数开始才是新增的元素
        inserted =args.slice(2);
        break;
    }
    if(inserted) {
      // 对新增元素进行 getter、setter 绑定
      ob.observerArray(inserted);
    }
    // 触发方法
    ob.dep.notify();
    return result;
  });
};

var arrayKeys = Object.getOwnPropertyNames(arrayMethods);




更新 Observer
根据上例代码中的注释，改写 Observer，使得两者关联起来，达到监听数组变化的目的：


var Observer = function Observer(value) {
  this.value = value;
  this.dep = new Dep();
  def(value, '__ob__', this);
  // 如果是数组，则遍历所有元素
  if(Array.isArray(value)) {
    var argument = hasProto "nofollow" target="_blank" href="https://github.com/youngwind/blog/issues/85">vue早期源码学习系列之二：如何监听一个数组的变化

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。