数组的监听

误区

vue2 不能检查到下面数组的变化

• 直接用索引设置元素，如vm.items[0]={}
• 修改数据的长度，如vm.items.length = 0

vue2 其实是可以实现数组响应式的，作者没实现是因为：性能代码与用户体验收益不成正比（作者原话）

包装方法

vue 通过重新包装了数据中数组的常用方法，使得调用这些方法的时候数据可以实现响应

方法包括

• push
• pop
• shift
• unshift
• splice
• sort
• reverse

代码实现

相关源码在这

• observe/array-augmentations.js
• observe/observer.js

const aryMeghods = [
    'push',
    'pop',
    'shift',
    'unshift',
    'splice',
    'sort',
    'reverse',
];
const arrayAugmentations = [];
aryMethods.forEach(method => {
    // 原生array原型方法
    let original = Array.prototype[method];
    // 将 push 等封装好的方法定义在对象 arrayAugmentations 的属性上（非原型属性）
    arrayAugmentations[method] = function () {
        // 调用对应的原生方法并返回结果
        return original.apply(this, arguments);
    };
});
let list = [1, 2, 3];
// 将要监听的数组的原型指向上面定义的数组
// 若不能使用`__proto__`，则直接给实例数组绑定包装过的方法
list.__proto__ = arrayAugmentations;