第 123 题：vue 是如何对数组方法进行变异的？例如 push、pop、splice 等方法

[yygmind]

[Loading-m]

原型拦截

[JuneScut]

对于这些变异方法vue做了包裹，在原型上进行了拦截，调用原生的数组方法后，还会执行发布和变更的操作来触发视图的更新。

[fyhhub]

第一次issue。。。
直接上源码

const arrayProto = Array.prototype
export const arrayMethods = Object.create(arrayProto)
const methodsToPatch = [
  'push',
  'pop',
  'shift',
  'unshift',
  'splice',
  'sort',
  'reverse'
]

/**
 * Intercept mutating methods and emit events
 */
methodsToPatch.forEach(function (method) {  
  // cache original method
  const original = arrayProto[method]
  def(arrayMethods, method, function mutator (...args) {
    const result = original.apply(this, args)
    const ob = this.__ob__
    let inserted
    switch (method) {
      case 'push':
      case 'unshift':
        inserted = args
        break
      case 'splice':
        inserted = args.slice(2)
        break
    }
    if (inserted) ob.observeArray(inserted)
    // notify change
    ob.dep.notify()
    return result
  })
})

简单来讲，重写了数组中的那些方法，首先获取到这个数组的__ob__,也就是它的Observer对象，如果有新的值，就调用observeArray继续对新的值观察变化，然后手动调用notify，通知渲染watcher，执行update

[gto999]

const arrayProto = Array.prototype;
const arrayMethods = Object.create(arrayProto);
['push', 'pop', 'shift', 'unshift', 'splice', 'sort', 'reverse'].forEach((method) => {
    const original = arrayProto[method];
    Object.defineProperty(arrayMethods, method, {
        value: function mutaor(...args) {
            return original.apply(this, args);
        },
        enumerable: false,
        writable: true,
        configurable: true
    })
})

[atheist1]

1. 为什么要对数组进行单独处理

在Vue现有阶段中，对响应式处理利用的是Object.defineProperty对数据进行拦截，而这个方法并不能监听到数组内部变化，数组长度变化，数组的截取变化等，所以我们需要对这些操作进行hack，让vue能监听到其中的变化。

2.怎么对数组进行处理

methodsToPatch.forEach(function(method) {
    // cache original method
    // 获取原方法
    var original = arrayProto[method];
    // def方法重新定义arrayMethods的method方法，然后将新的取值方法赋值
    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':
          // [].push(1),[].unshift(1)
          // arg = [1]
          inserted = args;
          break
        case 'splice':
          // [1,2,3].splice(0,1,1)
          // 第三个参数为插入的值
          inserted = args.slice(2);
          break
      }
      if (inserted) { ob.observeArray(inserted); }
      // 监听变化，如果不是插入操作直接循环响应
      // 如果是去除数组参数方法，触发一次notify将会重新计算
      // 如果仅仅是数字数据，任何操作只需要再次执行一次notify则可以
      // 但是如果新增的是一个对象类型，就需要重新监听
      // 为什么用角标和length属性不能监听的原因是因为无法触发obj的get方法，所以没法动态监听
      // notify change
      ob.dep.notify();
      return result
    });
  });

正如该题所问，vue对push,pop,splice等方法进行了hack，hack方式很简单，如果加入新对象，对新对象进行响应式化，至于如何响应式化请参考vue源码。
举例来说对于push和unshift会推入一个新的对象到数组里(不管从前还是从后),记录这个加入的对象，并调用Observe方法将加入的对象转换成响应式对象,对于splice方法，如果加入了新对象也是将该对象响应式化。
最后一步是向外抛出数组变化，提醒观察者进行更新。

3.存在问题

对于Object.defineProperty的缺陷导致如果直接改变数组下标是无法hack的，由于此点，vue提供了$set方法，最新的解决方案当然是利用Proxy对象进行监听，但是Proxy的缺陷在于兼容性，可能会为了性能以及便利而放弃兼容性吧，一切都要看尤大的决定了。

4.ps

不知道啥时候3.0才能出来，都等到迫不及待了。

[weimingxinas]

为什么不能监听数组的变化？

function(obj, key) {
  let val = obj[key];
  Object.defineProperty(obj, key, {
    enumerable: true,
    configurable: true,
    get() {
      console.log('in get');
      return val;
    },
    set(newVal) {
      if (newVal === val) {
        return;
      }
      val = newVal;
    }
  });
}
var a = [1, 2, 3]
defineReactive(a, 0)
a[0] = 5 // in get

这有什么问题？

[atheist1]

为什么不能监听数组的变化？

function(obj, key) {
  let val = obj[key];
  Object.defineProperty(obj, key, {
    enumerable: true,
    configurable: true,
    get() {
      console.log('in get');
      return val;
    },
    set(newVal) {
      if (newVal === val) {
        return;
      }
      val = newVal;
    }
  });
}
var a = [1, 2, 3]
defineReactive(a, 0)
a[0] = 5 // in get

这有什么问题？

这里说的不能监听数组变化是指{b:[1,2,3]},这样去改变b[0] =2是无法触发依赖收集的
而你这种写法实际上是不能算属于数组的监听了，实际上是利用了js最顶层原型是对象的原理，你监听的是a下面的0属性，a下面的1属性，甚至是a下面的length属性
原来研究过一下这个，不太记得当时的结论了，但是刚才想了下，你非要说可以监听的话，这样是能做到监听的没问题。但是这样浪费的性能将指数倍增加，你无法预估一个数组有多少层有多少位，你需要对数组每一层每一位进行依赖收集和更新时的notify。

[MissNanLan]

我之前没想通为什么vue会数组方法进行变异，能变异到哪里去，pop()还是pop()呀，看了诸位的回答明白了。vue是通过Object.defineProperty来监听数据的变化，但是这个方法并不能监听数组长度的变化等，所以要对数组进行hack，让vue检测到内部的变化

动态检测数组原型

	/*
	 * not type checking this file because flow doesn't play well with
	 * dynamically accessing methods on Array prototype
	 */

	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);
			var ob = this.__ob__;
			var inserted;
			switch (method) {
				case 'push':
				case 'unshift':
					inserted = args;
					break
				case 'splice':
					inserted = args.slice(2);
					break
			}
			if (inserted) {
				ob.observeArray(inserted);
			}
			// notify change
			ob.dep.notify();
			return result
		});
	});

	/**
	 * Observe a list of Array items.
	 */
	Observer.prototype.observeArray = function observeArray(items) {
		for (var i = 0, l = items.length; i < l; i++) {
			observe(items[i]);
		}
	};

这是源码，还不是很理解。
大概意思就是调用数组的原型方法，如果推入了一个对象， 那么会调动observe的方法将对象改成响应式对象，然后再通知观察者进行更新

[xshinei]

变异的本质就在这些方法内部加上自定义的逻辑，其实就是想监听这些方法的调用。

Vue中默认的做法就是在数组实例与它的原型之间，插入了一个新的原型对象，这个原型方法实现了这些变异方法，也就拦截了真正数组原型上的方法（因为原型链的机制，找到了就不会继续往上找了）。
变异方法中增加了自定义逻辑，也调用了真正数组原型上的方法，即实现了目的，也不会对正常使用造成影响。

如果浏览器不支持___proto__这个属性，Vue则直接在数组实例上增加这些变异方法。