Vue2 不能监听数组下标原因
Vue2 用的 Object.defineProperty() 方法来监听属性的变化 Object.defineProperty 是可以劫持数组的
js
let arr = [1, 2, 3, 4, 5];
let copyArray = arr.slice();
Object.keys(copyArray).forEach((key, value, array) => {
Object.defineProperty(copyArray, key, {
get: () => {
console.log("key", key);
return arr[key];
},
set: (value) => {
console.log("value", value);
arr[key] = value;
},
});
});
arr[0] = 100;
console.log(arr[1]);
console.log(arr);
为什么不使用 Object.defineProperty 监听数组下标?
Object.defineProperty 可以劫持数组 而 vue2 并没有用来接出数据 原因: 数组的下标是动态的,无法确定 例如一个数组 length 变化了,我可能需要重新拷贝数组,然后遍历再劫持。每次数数组变化带动的数据更新开销很大,若数据量变大,性能开销会增大,会导致框架的性能稳定。因此 vue2 放弃了一定用户的便捷,提供了$set 方法来操作数组,依此来最大程度保证框架的性能问题。