如何利用 Proxy 拦截对象的 get/set 实现数据响应式监听（Vue3 原理）-js教程-PHP中文网

vue3响应式核心是proxy拦截get/set：get时用reflect.get取值并track收集依赖，set时用reflect.set赋值并trigger触发更新；它天然支持数组、动态属性和嵌套对象，无需递归初始化，相比object.defineproperty更全面高效。

如何利用 proxy 拦截对象的 get/set 实现数据响应式监听（vue3 原理）

Vue3 的响应式核心就是靠 Proxy 拦截对象的读写操作，在 get 时收集依赖，在 set 时触发更新，整个过程无需递归初始化、天然支持数组和动态属性。

Proxy 如何拦截 get/set

Proxy 接收目标对象和一个处理器（handler）对象，其中 get 和 set 是两个关键拦截器：

get(target, key, receiver)：当访问 obj.xxx 时触发。这里可以做两件事：一是用 Reflect.get() 正常取值，二是调用依赖收集函数（如 track(target, key)），把当前正在执行的副作用函数（比如渲染函数或 computed）和这个 key 关联起来
set(target, key, value, receiver)：当赋值 obj.xxx = val 时触发。先用 Reflect.set() 完成真实赋值，再调用触发函数（如 trigger(target, key)），通知所有依赖该 key 的副作用函数重新执行

为什么必须搭配 Reflect 使用

直接写 target[key] 或 target[key] = value 会丢失代理语义，尤其在有 getter/setter 或原型链访问时容易出错。而 Reflect.get 和 Reflect.set 是规范化的操作封装，能正确处理：
– 原型链上的属性访问
– 访问器属性（getter/setter）
– receiver 参数控制 this 指向（确保在 proxy 内部调用方法时，this 仍指向 proxy 实例）
Vue3 所有拦截器内部都统一使用 Reflect 方法，保证行为可预测、可复现。

vue-admin-change-reviewer

审查 Vue 管理后台的变更请求（Vue 2 + Element UI，Vue 3 + Element Plus）。重点关注最小化变更实现、上线风险检查以及回归检查清单生成。

下载

如何支持嵌套对象和数组

Proxy 默认只代理第一层，深层数据需要“懒代理”策略：

在 get 中，若返回值是对象或数组，就递归调用 reactive() 包装它，下次访问其属性时才会创建下一层 Proxy
数组不用特殊处理 push/pop —— 因为 Proxy 能直接拦截数组实例的方法调用（如 arr.push()），但 Vue3 还额外劫持了 Map/Set 的方法（如 get、add），通过函数重写实现依赖追踪，避免把 arr.get 误当成 key 来收集