vue 源码分析系列之数组监听

 /**
     * vue 数组监听原理， 重写数组各个方法函数实现监听
      */
    //保存数组原型对象
    var arrayProto = Array.prototype;
    //创建空对象，并将原型指向数组的原型对象，后续的创建的新数组的原型只要指向这个数组就可以了
    var arrayMethods = Object.create(arrayProto);
    //需要监听的方法
    var methodsToPatch = [
      'push',
      'pop',
      'shift',
      'unshift',
      'splice',
      'sort',
      'reverse'
    ];
  
    /**
     * Intercept mutating methods and emit events
     */
    methodsToPatch.forEach(function (method) {
      // cache original method
      var original = arrayProto[method];
      //将需要监听的方法重写，抽离变动的数据
      def(arrayMethods, method, function mutator () {
        //复制数组调用时的函数参数数组
        var args = [], len = arguments.length;
        while ( len-- ) args[ len ] = arguments[ len ];
        //利用原生数组的原型方法
        var result = original.apply(this, args);
        //传入vue的监听对象
        var ob = this.__ob__;
        //存储新增的数组数据
        var inserted;
        switch (method) {
          case 'push':
          case 'unshift':
            //数组左边插入的数据
            inserted = args;
            break
          case 'splice':
            inserted = args.slice(2);
            break
        }
        //得到变动的数组数据后，调用后续vue写的监听函数
        if (inserted) { ob.observeArray(inserted); }
        // notify change
        //订阅通知变化
        ob.dep.notify();
        return result
      });
    });