vue2监测变量改动

49 阅读1分钟
mounted() {
  const targetKey = 'someData'; // 目标变量
  const vm = this;
  const originalSetter = Object.getOwnPropertyDescriptor(this.$data, targetKey).set;

  Object.defineProperty(this.$data, targetKey, {
    get() {
      return vm._data[targetKey];
    },
    set(newValue) {
      console.trace('Setting someData'); // 打印堆栈
      debugger; // 设置断点
      originalSetter.call(vm, newValue);
    },
  });
},
created() {
  const targetArray = this.someArray; // 目标数组

  // 保存原始方法
  const originalPush = targetArray.push;
  const originalSplice = targetArray.splice;

  // 重写 push
  targetArray.push = function (...args) {
    console.trace('Array push triggered:', args); // 打印堆栈信息
    debugger; // 添加断点
    return originalPush.apply(this, args); // 调用原始方法
  };

  // 重写 splice
  targetArray.splice = function (...args) {
    console.trace('Array splice triggered:', args); // 打印堆栈信息
    debugger; // 添加断点
    return originalSplice.apply(this, args); // 调用原始方法
  };
}