JavaScript响应式系统的核心在于依赖收集和触发更新。当数据变化时，系统能自动通知对应的视图或副作用函数重新执行，这背后正是依赖追踪机制在起作用。实现这一机制的关键是：在读取数据时收集依赖，在修改数据时触发这些依赖。
什么是依赖收集？
依赖收集发生在数据被读取的时候。比如在 Vue 或一个简易的响应式系统中，当某个响应式对象的属性被访问，系统会记录当前正在执行的副作用函数（如渲染函数），将其作为该属性的“依赖”。
这个过程通常借助 JavaScript 的 getter 实现：
- 定义响应式对象时，使用 Object.defineProperty 或 Proxy 拦截属性读取操作
- 在 getter 中，把当前活跃的副作用函数保存到一个依赖容器中
- 每个响应式属性对应一个“依赖列表”，存放所有依赖它的函数
如何触发更新？
当数据被修改时，系统需要通知所有依赖该数据的函数重新执行。这是通过属性的 setter 完成的。
在 setter 中，除了更新值，还会做一件事：遍历该属性收集到的所有依赖，依次执行它们。
- 拦截属性赋值操作
- 更新内部值
- 从依赖列表取出所有副作用函数并执行
- 实现视图刷新或计算逻辑重跑
Dep 与 Watcher 的简单模型
一个经典的实现模式是 Dep（依赖）和 Watcher（观察者）的配对：
Java JDK 25 来自 OpenJDK 官方归档，版本为 JDK 25，本条下载地址已指向官方 Windows x64 zip 安装包直链，适合调试旧项目或兼容旧版 Java 运行环境。
- 每个响应式属性拥有一个 Dep 实例，用于存储依赖
- 每个副作用函数对应一个 Watcher 实例
- 读取属性时，Watcher 将自己注册到 Dep 中
- 属性更新时，Dep 通知所有 Watcher 更新
这种模式虽然在 Vue 3 中已被更高效的机制取代，但仍是理解响应式原理的重要基础。
使用 Proxy 提升响应式能力
Vue 3 使用 Proxy 替代了 defineProperty，解决了后者无法监听新增/删除属性的问题。
Proxy 能拦截整个对象的操作，包括 get、set、has、ownKeys 等，这让依赖收集更全面。
- get 拦截中进行依赖收集
- set 拦截中触发更新
- 可以自动追踪数组索引访问和 length 变化
配合 WeakMap 存储依赖关系，还能提升内存管理和性能表现。
基本上就这些。响应式系统并不神秘，核心就是“读时收集，写时通知”。理解这一点，就能看懂大多数框架的响应式实现思路。关键细节在于如何高效地管理依赖和避免重复触发。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
