vue 3 中数组的 push、pop 等变异方法需通过重写原型实现响应，因原生调用不触发 proxy 的 set/get；proxy 可拦截索引赋值和 length 修改，但必须手动包装原型方法并调用 trigger 通知更新。
javascript 数组方法本身不会触发数据绑定，必须与响应式机制协同才能让 ui 感知变化。关键不在于“用了什么方法”，而在于“这些方法是否被响应式系统捕获”。现代框架（如 vue 3）已内置处理逻辑，手动实现时则需明确哪些操作可被监听、哪些会静默失效。
哪些数组方法天然可被 Proxy 拦截
Proxy 能直接捕获所有标准数组原型方法调用，无需额外封装：
-
push、pop、shift、unshift、splice、sort、reverse：这些方法会修改原数组，Proxy 的
set或自定义apply拦截器可识别并触发更新 -
length 赋值：如
arr.length = 0，Proxy 的set可拦截，而Object.defineProperty无法监听 -
for...of、forEach 等遍历操作：Proxy 的
get和ownKeys可配合依赖收集，确保视图在读取时建立响应关系
哪些数组操作会绕过响应式监听
即使使用了 Proxy 或 defineProperty，以下写法仍不会触发更新：
-
索引直接赋值：如
arr[1] = 'new'—— Proxy 可拦截（因属于set），但Object.defineProperty对数组索引无效 -
直接替换整个数组：如
arr = [...arr, item]—— 若未重新赋值给响应式变量（如state.arr = [...arr, item]），旧引用丢失，绑定断裂 -
非变异方法返回新数组：如
map、filter、slice不修改原数组，需显式赋值回响应式字段才能触发更新
如何让数组变更真正驱动 UI 更新
仅劫持方法还不够，必须打通“变更 → 通知 → 重渲染”链路：
- 每次拦截到变异操作后，应调用统一的
triggerEffect函数，通知所有依赖该数组的 Watcher 或 effect 重新执行 - 模板中访问
v-for="item in list"时，需在get阶段将当前渲染函数注册为数组的依赖（通过track收集） - 对嵌套对象数组，Proxy 应递归代理每个元素（懒代理策略），否则
list[0].name = 'x'不会触发外层数组的更新通知
实际开发中的推荐做法
避免手动实现数组响应式逻辑，优先采用成熟方案：
- Vue 3 中直接使用
ref或reactive声明数组，所有标准方法均自动响应 - React 中不依赖数组响应式，而是用
useState配合不可变更新（如setList([...list, newItem])）触发重渲染 - 若需手写轻量响应式，用 Proxy 封装数组并重写原型方法（如 push）是可行路径，但务必同步维护依赖追踪与派发更新逻辑
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
