利用 `Object.defineProperty` 实现 Vue2 风格的数组变异方法监听

各位同学，大家好！今天我们来深入探讨一个在前端开发中非常经典且重要的问题：如何实现类似 Vue 2 中对数组变化的响应式监听机制。这不仅是理解 Vue 响应式原理的核心环节，也是我们掌握 JavaScript 深度特性的一次绝佳实践机会。

在开始之前，请允许我先做一个简单的铺垫：Vue 2 使用了 Object.defineProperty 来劫持对象属性的变化，从而实现数据绑定和视图更新。但众所周知，Object.defineProperty 对于数组的某些原生方法（如 push, pop, shift, unshift, splice, sort, reverse）是无法直接监听的 —— 因为这些方法会改变数组本身的内容，而不是通过赋值的方式修改属性。

那么问题来了：

如果我要让 Vue 2 能正确地检测到数组的这种“变异”操作，并触发相应的依赖更新，应该怎么做？

答案就是：手动重写数组的原型方法，使其具备响应式能力。

一、为什么不能直接用 `Object.defineProperty` 监听数组？

让我们先看一个基础示例：

const arr = [1, 2, 3];
Object.defineProperty(arr, '0', {
  get() {
    console.log('get 0');
    return this[0];
  },
  set(val) {
    console.log('set 0 to', val);
    this[0] = val;
  }
});

arr[0] = 5; // 输出 "set 0 to 5"

看起来没问题？确实可以监听到 arr[0] = 5 这种索引赋值操作。
但是！

arr.push(4); // 不会触发任何 getter/setter！

为什么会这样？

因为 push 是一个原生方法，它不会调用 Object.defineProperty 定义的 setter，而是直接操作内部的 [[ArrayData]] 结构（这是 V8 引擎的底层实现）。所以，即使你给数组元素绑定了 getter/setter，也无法感知 push、splice 等这类“批量修改”的行为。

这就是 Vue 2 的核心挑战之一：如何让数组的“变异方法”也能被监听？

二、Vue 2 的解决方案：劫持数组原型 + 手动包装方法

Vue 2 在初始化时做了两件事：

劫持数组原型上的变异方法（如 push, pop, splice）
将这些方法替换为自定义版本，在执行前后通知依赖更新

下面我们一步一步实现这个过程。

步骤 1：保存原始数组原型方法

首先我们要记录下原始的数组方法，以便后续调用它们：

// 保存原始数组原型中的变异方法
const originalProto = Array.prototype;
const methodsToPatch = ['push', 'pop', 'shift', 'unshift', 'splice', 'sort', 'reverse'];

// 创建一个新的对象用于存储原始方法
const patchedMethods = {};
methodsToPatch.forEach(method => {
  patchedMethods[method] = originalProto[method];
});

步骤 2：创建新的数组原型对象并覆盖方法

接下来，我们创建一个新的原型对象，并将其挂载到目标数组上：

const arrayMethods = Object.create(originalProto);

methodsToPatch.forEach(method => {
  arrayMethods[method] = function(...args) {
    const result = patchedMethods[method].apply(this, args);

    // 执行完后通知依赖更新（模拟 Vue 内部逻辑）
    console.log(`数组 ${method} 方法被调用，当前长度: ${this.length}`);

    // 这里可以插入通知 watcher 更新的逻辑
    // 如 this.__ob__.dep.notify()

    return result;
  };
});

此时，如果你这样做：

const myArr = [1, 2, 3];
myArr.__proto__ = arrayMethods;

myArr.push(4); // 控制台输出："数组 push 方法被调用，当前长度: 4"

你就成功拦截了 push 行为！

⚠️ 注意：这里使用的是 __proto__，这是 ES5 之后才支持的非标准语法（现代浏览器可用）。更推荐的做法是使用 Object.setPrototypeOf() 或者通过构造函数继承的方式处理。

三、完整封装：模拟 Vue 2 的响应式数组类

为了更好地理解整个流程，我们可以封装一个类来模拟 Vue 的响应式数组机制：

class ReactiveArray extends Array {
  constructor(...items) {
    super(...items);
    this._isReactive = true;
    this.dep = new Dep(); // 假设 Dep 是一个观察者管理器（类似 Vue 的 Watcher）

    // 将数组原型指向我们的 patch 版本
    Object.setPrototypeOf(this, reactiveArrayMethods);
  }

  // 提供一个静态工厂方法方便创建
  static create(arr) {
    const reactive = new ReactiveArray(...arr);
    return reactive;
  }
}

// 定义变异方法的代理对象
const reactiveArrayMethods = Object.create(Array.prototype);

methodsToPatch.forEach(method => {
  reactiveArrayMethods[method] = function(...args) {
    const result = patchedMethods[method].apply(this, args);

    // 触发依赖更新（这里是简化版）
    this.dep.notify();

    return result;
  };
});

现在测试一下：

const data = ReactiveArray.create([1, 2, 3]);

data.push(4);
// 输出："数组 push 方法被调用，当前长度: 4"

console.log(data); // [1, 2, 3, 4]

完美！我们已经实现了对数组变异方法的监听。

四、关键细节补充：为何要单独处理数组？

问题	解释
`Object.defineProperty` 无法监听数组方法	数组方法不是属性访问，而是直接调用引擎内部逻辑
Vue 为什么不直接用 `Proxy`？	Vue 2 发布时 Proxy 还未普及，且兼容性差（IE11 不支持）
为什么只 patch 变异方法？	非变异方法如 `slice`, `concat` 不会改变原数组，不需要监听

💡 重要提醒：Vue 2 的这种方案虽然有效，但也存在局限性：

无法监听 this[0] = x 这种索引赋值以外的操作（除非你用 defineProperty）
如果开发者手动修改了 Array.prototype，可能导致意外行为

五、进一步优化：结合 `defineProperty` 实现索引监听

为了让数组既支持索引赋值又支持变异方法，我们需要同时利用两种机制：

function observeArray(arr) {
  if (!Array.isArray(arr)) return;

  // 劫持每个索引属性（适用于 arr[0] = 1 的情况）
  arr.forEach((val, index) => {
    if (typeof val === 'object' && val !== null) {
      observe(val); // 递归深层监听
    }

    Object.defineProperty(arr, index, {
      enumerable: true,
      configurable: true,
      get() {
        console.log(`读取索引 ${index}`);
        return arr[index];
      },
      set(newVal) {
        console.log(`设置索引 ${index} 为 ${newVal}`);
        arr[index] = newVal;
        arr.dep.notify(); // 通知依赖
      }
    });
  });

  // 替换原型（前面已讲过）
  arr.__proto__ = reactiveArrayMethods;
}

这样，无论是 arr[0] = 5 还是 arr.push(6)，都能被捕获！

六、性能对比与权衡分析

方案	优点	缺点	适用场景
`Object.defineProperty` + 原型劫持	兼容性强，适合旧项目迁移	性能略低，不支持动态新增属性	Vue 2 及类似框架早期版本
`Proxy`（ES6+）	更灵活，无需手动 patch	不兼容 IE11，代码复杂度高	Vue 3 及现代应用

✅ 推荐：对于学习目的或维护老项目，掌握 Object.defineProperty + 原型劫持 是必须的；
✅ 对于新项目，则优先考虑使用 Proxy。

七、总结与延伸思考

今天我们从零开始构建了一个类似 Vue 2 的响应式数组系统，核心要点如下：

Object.defineProperty 无法监听数组的变异方法，必须手动劫持原型；
通过替换 Array.prototype 上的方法，可以在执行前后添加副作用逻辑；
结合索引监听（defineProperty）可实现完整的响应式能力；
这是 Vue 2 实现响应式的基石技术之一，值得深入理解。

📌 最后留给大家一个问题作为思考题：

如果你在某个组件中使用了 this.items.push(item)，但在组件内没有重新渲染页面，可能的原因是什么？
（提示：可能是 dep 没有正确收集依赖，或者 notify 没有触发 watcher）

希望今天的分享能让大家对 Vue 响应式机制的理解更加深刻。如果你觉得有用，不妨动手试试自己写一个简易版本的响应式数组吧！你会发现，原来那些看似复杂的框架设计，其实都建立在扎实的基础之上。

谢谢大家！

利用 Object.defineProperty 实现 Vue2 风格的数组变异方法监听

一、为什么不能直接用 Object.defineProperty 监听数组？