利用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 响应式机制的理解更加深刻。如果你觉得有用，不妨动手试试自己写一个简易版本的响应式数组吧！你会发现，原来那些看似复杂的框架设计，其实都建立在扎实的基础之上。
谢谢大家！
