响应式 | 简述 watch

快速浏览

watch 函数

export function watch(
    // 数据源
    source: WatchSource | WatchSource[] | WatchEffect | object,
    // 回调函数
    cb?: WatchCallback | null,
    // 函数选项
    options: WatchOptions = EMPTY_OBJ
): WatchHandle {
 ...   
}

1. 支持多种数据源：

   • ref 对象
   • reactive 对象
   • getter 函数
   • 数组形式的多个数据源

2. 主要选项：

   • immediate: 是否立即执行回调
   • deep: 是否深度监听
   • once: 是否只执行一次
   • scheduler: 自定义调度器

traverse 函数：

export function traverse(
    // 深度遍历的对象
    value: unknown,
    // 深度遍历的层数，默认是完全遍历
    depth: number = Infinity,
    // 深度遍历对象的容器，防止循环引用
    seen?: Set<unknown>
): unknown

用于深度遍历对象，主要功能：

• 递归遍历对象的所有属性
• 支持 Array、Set、Map 等复杂数据结构
• 防止循环引用
• 支持控制遍历深度（使用 deep 选项）

onWatcherCleanup 函数

export function onWatcherCleanup(
    // 清理函数
    cleanupFn: () => void,
    // 是否静默失败的标志位
    failSilently = false,
    // 清理函数所属的 watcher 效果，默认为当前活动的 watcher
    owner: ReactiveEffect | undefined = activeWatcher
): void

用于注册清理函数，特点：

• 在 effect 重新运行前执行清理
• 可以绑定到特定的 watcher
• 支持静默失败模式

getCurrentWatcher 函数

export function getCurrentWatcher(): ReactiveEffect<any> | undefined

获取当前活动的 watcher effect

工作流程

1. 根据 source 类型创建响应的 getter 函数
2. 创建 ReactiveEffect 实例
3. 设置清理函数和调度器
4. 根据配置决定是否立即执行
5. 返回控制句柄用于暂停/恢复/停止监听

TODO 方法详解