proxy通过拦截属性读写实现响应式，读取时将当前副作用函数存入依赖地图，修改时触发对应更新，结合优化策略构建高效响应系统。

javaScript中的代理（Proxy）能拦截对象的操作，比如读取和写入属性。这个能力被现代响应式框架（如vue 3）用来实现自动依赖跟踪。核心思路是：在读取属性时收集依赖，在修改属性时触发更新。

通过Proxy拦截属性访问

当你用Proxy包装一个对象时，可以定义getter和setter行为。在getter中记录哪些属性被访问，在setter中通知相关部分数据变了。

例如：

const data = { count: 0 }; const observed = new Proxy(data, { get(target, key) { track(target, key); // 收集依赖 return target[key]; }, set(target, key, value) { target[key] = value; trigger(target, key); // 触发更新 return true; } });

track函数负责记住当前正在执行的副作用函数（比如渲染函数）依赖了哪个属性。trigger则在属性变化时重新运行这些函数。

立即学习“Java免费学习笔记（深入）”；

依赖是如何被收集的？

系统需要知道“谁”在什么时候读取了数据。通常会有一个全局变量（如activeEffect）保存当前正在执行的副作用函数。

当读取observed.count时，Proxy的get触发track，把activeEffect存入一个依赖地图中，结构类似：

万物追踪

AI 追踪任何你关心的信息

44

查看详情

• target → map
• key → Set(effect)

这样每个属性都维护着一组依赖它的副作用函数。

更新时如何触发响应？

当set被调用，除了赋值还会调用trigger。它从同样的依赖地图中找出该属性对应的effect集合，逐个执行。

这使得例如视图函数能自动重新运行，反映最新数据。

实际应用中的优化与细节

真实系统还会处理嵌套对象、数组变化、避免重复收集依赖、调度更新时机等问题。

比如：

• 递归代理或懒代理子对象
• 重写数组方法以捕获push、splice等操作
• 使用WeakMap存储依赖，便于垃圾回收
• 延迟触发更新（异步批处理）提升性能

基本上就这些。Proxy提供了底层机制，配合依赖追踪算法，实现了简洁而强大的响应式系统。不复杂但容易忽略的是上下文管理——确保track只在正确的执行环境中生效。