Vue监听数组变化源码解析

上一篇的代码中，忽略了对数组的处理，只关心了需要关心的部分，假装数组不存在。

这一篇开始考虑数组的问题。

从最简单的入手

先考虑一个问题，如何监听数组中的对象变化？忽略掉数组本身及其中的一般值，只考虑对象数组中的对象。

遍历数组，而后对数组中的每个对象调用 observe 方法

// 上一篇中出现的未曾重写的代码，这一篇中不再重复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]);  }};

现实的要求

实际实现中当然不会如上例那么简单，官方文档中对监听数组是这样描述的：

Vue 包含一组观察数组的突变方法，所以它们也将会触发视图更新。这些方法如下：
push()、pop()、shift()、unshift()、splice()、sort()、reverse()

由于 JavaScript 的限制， Vue 不能检测以下变动的数组：

当你直接设置一个项的索引时，例如：vm.items[indexOfItem] = newValue
当你修改数组的长度时，例如：vm.items.length = newLength
所以，要对数组本身的一些方法进行监听。

经常要用到的一个小函数

def，在整个 Vue 源码中反复出现，利用Object.defineProperty() 在 obj 上定义属性 key（也又可能是修改已存在属性 key）：

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

给对象添加一组方法

给对象添加一组方法，如果所在环境支持 proto，就简单了，直接把对象的 proto 指向这一组方法就好了；如果不支持，则遍历这一组方法，依次添加到对象中，作为隐藏属性（即 enumerable: false，不能被 in 关键字找到）:

var hasProto = '__proto__' in {};var augment = hasProto ? protoAugment : copyAugment;function protoAugment(target, src) {  target.__proto__ = src;}function copyAugment(target, src, keys) {  for(var i = 0; i < keys.length; i++) {    var key = keys[i];    def(target, key, src[key]);  }}

先来一发简单的

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