数组push/pop响应式处理详解

Vue 的响应式数组为何能感知 push、pop 等操作？答案在于它并未依赖 getter/setter 的被动监听，而是主动拦截并重写了数组原型上的 7 个变异方法，在执行原生逻辑后手动触发依赖更新；尽管 Vue 3 已用 Proxy 替代 defineProperty，大幅简化了索引赋值和 length 修改的捕获，但因 Proxy 无法自动劫持原型方法调用，重写 push、pop 等方法仍是不可替代的核心机制——这背后是权衡语言限制与响应式完备性的精巧设计，也是理解 Vue 响应式原理绕不开的关键一环。

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 可通过 set trap 拦截，但需确保目标是 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。所以重写仍是必要步骤，只是实现更轻量、更可靠。

今天关于《数组push/pop响应式处理详解》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！