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');
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 ? protoaugment : copyaugment;
argument(value, arraymethods, arraykeys);
this.observearray(value);
} else {
this.walk(value);
}
};
参考资料：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。