Vue监听数组变化源码解析
上一篇的代码中，忽略了对数组的处理，只关心了需要关心的部分，假装数组不存在。
这一篇开始考虑数组的问题。
从最简单的入手
先考虑一个问题，如何监听数组中的对象变化？忽略掉数组本身及其中的一般值，只考虑对象数组中的对象。
遍历数组，而后对数组中的每个对象调用observe方法
//上一篇中出现的未曾重写的代码，这一篇中不再重复
varObserver=functionObserver(value){
this.value=value;
this.dep=newDep();
//如果是数组，则遍历所有元素
if(Array.isArray(value)){
this.observeArray(value);
}else{
this.walk(value);
}
};
Observer.prototype.observeArray=functionobserveArray(items){
//遍历数组所有元素，对单个元素进行getter、setter绑定
for(vari=0,l=items.length;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）：
functiondef(obj,key,val,enumerable){
Object.defineProperty(obj,key,{
value:val,
//转变为boole值，如果不传参，转为false
enumerable:!!enumerable,
writable:true,
configurable:true
});
}
给对象添加一组方法
给对象添加一组方法，如果所在环境支持proto，就简单了，直接把对象的proto指向这一组方法就好了；如果不支持，则遍历这一组方法，依次添加到对象中，作为隐藏属性（即enumerable:false，不能被in关键字找到）:
varhasProto='__proto__'in{};
varaugment=hasProto?protoAugment:copyAugment;
functionprotoAugment(target,src){
target.__proto__=src;
}
functioncopyAugment(target,src,keys){
for(vari=0;i
先来一发简单的
vararrayPush={};
(function(method){
varoriginal=Array.prototype[method];
arrayPush[method]=function(){
//this指向可通过下面的测试看出
console.log(this);
returnoriginal.apply(this,arguments)
};
})('push');
vartestPush=[];
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中，来达到监视其变化的目的。
vararrayProto=Array.prototype;
vararrayMethods=Object.create(arrayProto);
接着就是遍历需要触发更新的几个方法，依次将其附加到arrayMethods上：
['push','pop','shift','unshift','splice','sort','reverse'].forEach(function(method){
//获取原始的数组操作方法
varoriginal=arrayProto[method];
//在arrayMethods上新建属性method，并为method指定值（函数）
//即改写arrayMethods上的同名数组方法
def(arrayMethods,method,functionmutator(){
vararguments$1=arguments;
vari=arguments.length;
varargs=newArray(i);
//将伪数组arguments转变为数组形式
//为何不用[].slice.call(arguments)？
while(i--){
args[i]=arguments$1[i];
}
varresult=original.apply(this,args);
//因arrayMethods是为了作为Observer中的value的原型或者直接作为属性，所以此处的this一般就是指向Observer中的value
//当然，还需要修改Observer，使得其中的value有一个指向Observer自身的属性，__ob__，以此将两者关联起来
varob=this.__ob__;
//存放新增的数组元素
varinserted;
//对几个可能有新增元素的方法单独考虑
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();
returnresult;
});
};
vararrayKeys=Object.getOwnPropertyNames(arrayMethods);
更新Observer
根据上例代码中的注释，改写Observer，使得两者关联起来，达到监听数组变化的目的：
varObserver=functionObserver(value){
this.value=value;
this.dep=newDep();
def(value,'__ob__',this);
//如果是数组，则遍历所有元素
if(Array.isArray(value)){
varargument=hasProto?protoAugment:copyAugment;
argument(value,arrayMethods,arrayKeys);
this.observeArray(value);
}else{
this.walk(value);
}
};
参考资料：
vue早期源码学习系列之二：如何监听一个数组的变化
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。