如何通过 Vue3 的 Proxy 拦截实现对象 getset 方法，构建响应式数据监听机制？

本文共计772个文字，预计阅读时间需要4分钟。

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 或原型链访问时容易出错。