vue watch实现过程

Vue 的 watch 实现过程

Vue 的 watch 功能是通过响应式系统的依赖收集和触发机制实现的。以下是其核心实现逻辑：

依赖收集阶段

在组件初始化时，Vue 会遍历 watch 选项中定义的每个侦听器。对于每个侦听器，Vue 会创建一个 Watcher 实例，并将侦听器的回调函数作为该 Watcher 的更新函数。

当首次求值侦听器的表达式（或函数）时，会触发响应式属性的 getter，从而将当前 Watcher 添加到该属性的依赖列表中。

// 简化版 Watcher 构造过程
class Watcher {
  constructor(vm, expOrFn, callback) {
    this.vm = vm
    this.getter = parsePath(expOrFn)
    this.cb = callback
    this.value = this.get()
  }

  get() {
    pushTarget(this) // 设置当前运行的 Watcher
    const value = this.getter.call(this.vm, this.vm)
    popTarget() // 清除当前 Watcher
    return value
  }

  update() {
    const oldValue = this.value
    const newValue = this.get()
    this.cb.call(this.vm, newValue, oldValue)
  }
}

触发更新阶段

当侦听的响应式属性发生变化时，会触发属性的 setter，进而通知所有依赖的 Watcher 执行更新。对于 watch 创建的 Watcher，会执行回调函数并传入新旧值。

Vue 内部使用异步队列来批量处理更新，通过 nextTick 确保所有变更完成后才执行回调。

深度侦听实现

当配置 deep: true 时，Vue 会递归遍历侦听对象的所有属性，主动触发它们的 getter 来收集依赖：

function traverse(val) {
  if (typeof val !== 'object') return

  for (const key in val) {
    traverse(val[key]) // 递归访问所有属性
  }
}

立即调用实现

当配置 immediate: true 时，会在 Watcher 创建后立即执行回调：

if (options.immediate) {
  callback.call(vm, watcher.value, null)
}

性能优化

Vue 3 的 watch 基于 effect 和 ReactiveEffect 实现，原理类似但更高效，支持更灵活的清理机制和更好的组合式 API 集成。