上一篇的代码中,忽略了对数组的处理,只关心了需要关心的部分,假装数组不存在。
这一篇开始考虑数组的问题。
从最简单的入手
先考虑一个问题,如何监听数组中的对象变化?忽略掉数组本身及其中的一般值,只考虑对象数组中的对象。
现实的要求
实际实现中当然不会如上例那么简单,官方文档中对监听数组是这样描述的:
Vue 包含一组观察数组的突变方法,所以它们也将会触发视图更新。这些方法如下:
由于 JavaScript 的限制, Vue 不能检测以下变动的数组:
当你直接设置一个项的索引时,例如:修改数组的长度时,例如:方法进行监听。 经常要用到的一个小函数 def,在整个 Vue 源码中反复出现,利用 在 obj 上定义属性 key(也又可能是修改已存在属性 key):给对象添加一组方法
给对象添加一组方法,如果所在环境支持 proto,就简单了,直接把对象的 proto 指向这一组方法就好了;如果不支持,则遍历这一组方法,依次添加到对象中,作为隐藏属性(即 enumerable: false,不能被 in 关键字找到):
target.proto = src;
}
function copyAugment(target,src,keys) {
for(var i = 0; i < keys.length; i++) {
var key = keys[i];
def(target,src[key]);
}
}
先来一发简单的
var original = Array.prototype[method];
arrayPush[method] = function() {
// this 指向可通过下面的测试看出
console.log(this);
return original.apply(this,arguments)
};
})('push');
伪改写数组原型来监听数组的变化
如官方文档所言,所需监视的只有 push()、pop()、shift()、unshift()、splice()、sort()、reverse() 7 种方法,这 7 种方法有可分为两类:
1、push()、unshift()、splice() 这三种可能会给数组添加新元素的方法;
2、其余的不会新增元素的方法。
为了避免污染全局的 Array,新建一个以 Array.prototype 为原型的对象,而后在这个对象本身附加属性,再把这个新建的对象作为原型或者作为属性添加到 Observer 的 value 中,来达到监视其变化的目的。
接着就是遍历需要触发更新的几个方法,依次将其附加到 arrayMethods 上:
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,使得两者关联起来,达到监听数组变化的目的: