17370845950

JavaScript响应式系统的核心在于依赖收集和触发更新。当数据变化时，系统能自动通知对应的视图或副作用函数重新执行，这背后正是依赖追踪机制在起作用。实现这一机制的关键是：在读取数据时收集依赖，在修改数据时触发这些依赖。

什么是依赖收集？

依赖收集发生在数据被读取的时候。比如在 Vue 或一个简易的响应式系统中，当某个响应式对象的属性被访问，系统会记录当前正在执行的副作用函数（如渲染函数），将其作为该属性的“依赖”。

这个过程通常借助 JavaScript 的 getter 实现：

• 定义响应式对象时，使用 Object.defineProperty 或 Proxy 拦截属性读取操作
• 在 getter 中，把当前活跃的副作用函数保存到一个依赖容器中
• 每个响应式属性对应一个“依赖列表”，存放所有依赖它的函数

如何触发更新？

当数据被修改时，系统需要通知所有依赖该数据的函数重新执行。这是通过属性的 setter 完成的。

在 setter 中，除了更新值，还会做一件事：遍历该属性收集到的所有依赖，依次执行它们。

• 拦截属性赋值操作
• 更新内部值
• 从依赖列表取出所有副作用函数并执行
• 实现视图刷新或计算逻辑重跑

Dep 与 Watcher 的简单模型

一个经典的实现模式是 Dep（依赖）和 Watcher（观察者）的配对：

• 每个响应式属性拥有一个 Dep 实例，用于存储依赖
• 每个副作用函数对应一个 Watcher 实例
• 读取属性时，Watcher 将自己注册到 Dep 中
• 属性更新时，Dep 通知所有 Watcher 更新

这种模式虽然在 Vue 3 中已被更高效的机制取代，但仍是理解响应式原理的重要基础。

使用 Proxy 提升响应式能力

Vue 3 使用 Proxy 替代了 defineProperty，解决了后者无法监听新增/删除属性的问题。

Proxy 能拦截整个对象的操作，包括 get、set、has、ownKeys 等，这让依赖收集更全面。

• get 拦截中进行依赖收集
• set 拦截中触发更新
• 可以自动追踪数组索引访问和 length 变化

配合 WeakMap 存储依赖关系，还能提升内存管理和性能表现。

基本上就这些。响应式系统并不神秘，核心就是“读时收集，写时通知”。理解这一点，就能看懂大多数框架的响应式实现思路。关键细节在于如何高效地管理依赖和避免重复触发。