响应式 | watch 的实现与核心特性

核心实现

1. watch 函数实现

• 实现了 Vue 中的 watch API

• 支持监听多种数据源:

  • ref 对象

  • reactive 对象

  • getter 函数

  • 数组形式的多个数据源

• 支持配置项：

  • immediate: 是否立即执行

  • deep: 深度监听

  • once: 只执行一次

  • scheduler: 调度器

2. 清理机制

const cleanupMap: WeakMap<ReactiveEffect, (() => void)[]> = new WeakMap()

• 通过 cleanupMap 管理监听器的清理函数

  • onWatcherCleanup 用于注册清理回调

  • 在监听器重新运行前执行清理操作

3. 核心函数：traverse 函数

export function traverse(
  value: unknown,
  depth: number = Infinity,
  seen?: Set<unknown>
): unknown

• 实现深度遍历响应式对象

• 支持类型：

  • ref 对象

  • 数组

  • Set/Map 集合

  • 普通对象

• 防止循环引用

• 支持遍历深度控制

核心特性

1. 响应式追踪

• 使用 ReactiveEffect 创建响应式效果

• 自动追踪依赖关系

• 支持暂停和恢复监听

2. 值比较机制

• 通过 hasChanged 判断值是否发生变化

• 对多数据源特殊处理

3. 错误处理

• 包含开发环境下的警告信息

• 对无效数据源进行提示

4. 性能优化

• 使用 WeakMap 存储清理函数

• 支持调度器优化更新时机

• 避免不必要的遍历和更新

这是 Vue 响应式系统中非常重要的一个模块，为 Vue 的数据监听功能提供了强大且灵活的实现。