Vue源码学习-监听数组的变化
监听数组的变化比起监听对象的属性变化麻烦了不少,因为在JS里数组这一数据结构的有着很多的修改方法,既可以通过push
,pop
,shift
等原生的方法来修改,也可以直接通过指定下标来直接赋值。官方文档的说明中,直接指出了Vue是通过包装了多种数组操作方法来实现的,因此如果直接指定下标来设置元素,或者通过长度来修改数组都是无法实现触发视图的更新的。
值得注意的是,所谓的包装数组的方法只是针对的声明的数据数组,即Vue实例中的data()函数中所拥有的,并非原生的Array对象中的方法,这也是为了尽量避免对全局造成影响。
这里以常见的几个方法为例子:
const methods = ['push', 'pop', 'shift', 'unshift', 'splice', 'sort', 'reverse'];
const arrWrapper = [];
methods.forEach(method => {
arrWrapper[method] = function() {
console.log('data has been changed');
return Array.prototype[method].apply(this, arguments);
}
})
var list = [1, 2, 3, 4];
list.__proto__ = arrWrapper;
list.push(5);
这样就基本完成了对数组方法的包装。