Vue响应式系统通过重写数组原型的7个变异方法（push、pop等）并手动触发更新来实现响应，因原生方法不触发getter/setter；Vue2用defineProperty补漏，Vue3用Proxy仍需重写原型方法。
Vue 的响应式系统要让数组的 push、pop 等方法“触发更新”，核心不是监听数组本身，而是拦截并重写这些方法的执行逻辑。因为原生数组方法不会访问属性或触发 getter/setter，Object.defineProperty 无法捕获它们对数组内容的修改。
为什么 push/pop 原本不响应？
JavaScript 数组是对象，但它的变异操作（如 push、pop、splice）直接作用于内部索引和 length，不经过属性读写流程。在 Vue 2 中，Object.defineProperty 只能劫持已存在的属性，对下标赋值（arr[0] = x）或调用原型方法均不会触发 setter；Vue 3 虽改用 Proxy，但 Proxy 默认也不自动代理数组方法——必须显式拦截。
如何实现“聪明”的 push/pop？
关键策略是替换数组的原型方法，在保留原始行为的同时插入响应式通知：
- 创建一个继承自
Array.prototype的新对象（如arrayMethods） - 覆盖 7 个会改变数组自身的原生方法：
push、pop、shift、unshift、splice、sort、reverse - 每个重写方法中：先调用原生逻辑（如
original.push.apply(this, args)），再手动触发依赖更新（如trigger(this, 'add', 'length')或trigger(this, 'set', index)） - 将响应式数组的
__proto__指向该新原型对象（现代浏览器），或降级为直接在实例上挂载重写方法（兼容旧环境）
变异方法的底层兼容要点
真正落地时需兼顾三类边界情况：
-
索引直接赋值失效问题：即使重写了
push，arr[0] = 'new'仍不响应。Vue 2 要求用Vue.set(arr, 0, 'new')；Vue 3 的 Proxy 可通过settrap 拦截，但需确保目标是 reactive 数组而非普通数组 -
length 修改不触发：设置
arr.length = 0不走任何重写方法。解决方案是同样拦截length属性的 set（Vue 2 在初始化时对length单独 defineProperty；Vue 3 的 Proxy 可统一捕获） -
嵌套结构递归响应：若
push进去的是对象或数组，需递归调用reactive()处理，否则新增项内部变化不响应
Vue 2 与 Vue 3 的处理差异
Vue 2 完全依赖原型替换 + defineProperty 补漏（如 length、索引）；Vue 3 利用 Proxy 的 set 和 get 可天然捕获索引访问与 length 修改，但仍需重写原型方法——因为 Proxy 的 trap 不会自动转发到原型链上的方法调用，arr.push() 仍是调用原型函数，不进 set trap。所以重写仍是必要步骤，只是实现更轻量、更可靠。
