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);

这样就基本完成了对数组方法的包装。