Vue2 不能监听数组下标原因

上次更新 2024年8月6日星期二 16:4:27 字数 0 字 时长 0 分钟

Vue2 用的 Object.defineProperty() 方法来监听属性的变化 Object.defineProperty 是可以劫持数组的

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 方法来操作数组，依此来最大程度保证框架的性能问题。