watch和watchEffect的区别？

watch 和 watchEffect 是 Vue 3 Composition API 中的两个响应式侦听函数，它们的核心区别在于侦听方式、响应时机、依赖收集机制以及性能开销等方面。

🧠 一句话总结区别

watch： 需要明确指定侦听的目标（ref、reactive、getter 等），适合处理有条件或异步副作用。
watchEffect： 自动收集依赖并立即执行，适合同步副作用或快速响应。

✅ 基本用法对比

watch

js 复制代码

watch(source, callback, options?)

js 复制代码

const count = ref(0)
watch(count, (newVal, oldVal) => {
  console.log('count 变化了', newVal, oldVal)
})

watchEffect

js 复制代码

watchEffect(() => {
  console.log('count 当前值是：', count.value)
})

核心区别详解

特性	watch	watchEffect
依赖收集方式	显式（需要指定侦听对象）	自动（内部运行时收集）
触发时机	默认惰性（值变化才触发）	默认立即执行一次
回调参数	(newValue, oldValue)	无参数
支持清理副作用	✅	✅
更适合的场景	异步逻辑、比较新旧值、节流防抖等	快速绑定响应式副作用，如 DOM、class、style
性能开销	较低（只监控指定）	略高（要追踪依赖）

使用场景举例🧪

watch

使用场景

侦听多个值：

js 复制代码

watch([foo, bar], ([newFoo, newBar]) => {
  console.log(newFoo, newBar)
})

异步副作用 + 防抖

js 复制代码

watch(query, async (newVal) => {
  const result = await fetchData(newVal)
  data.value = result
})

新旧值对比

js 复制代码

watch(count, (newVal, oldVal) => {
  if (newVal > oldVal) console.log('在增长')
})

watchEffect

使用场景

自动追踪依赖（无脑响应）

js 复制代码

watchEffect(() => {
  document.title = `当前值是 ${count.value}`
})

处理副作用，例如样式更新、事件监听等

js 复制代码

watchEffect(() => {
  if (visible.value) {
    document.body.classList.add('open')
  } else {
    document.body.classList.remove('open')
  }
})

源码角度分析（简化）🧬

我们看下 watch 和 watchEffect 在 Vue 源码中的关键机制（基于 Vue 3 源码）：

watchEffect 的核心🔍

js 复制代码

export function watchEffect(effect, options?) {
  return doWatch(effect, null, options)
}

watchEffect 实际上是调用 doWatch，传入的 source 为 null，意味着所有的依赖将由 effect 函数自动收集。

watch 的核心🔍

js 复制代码

export function watch(source, cb, options?) {
  return doWatch(source, cb, options)
}

与 watchEffect 不同，这里 source 是必须指定的。

doWatch（简化）🔬

js 复制代码

function doWatch(source, cb, options) {
  const getter = isFunction(source)
    ? source
    : () => traverse(source) // 深层依赖追踪

  const job = () => {
    const newValue = effect.run()
    if (cb) cb(newValue, oldValue)
  }

  const effect = new ReactiveEffect(getter, job)
  if (options.immediate) job()
  else oldValue = effect.run()
}

核心：

ReactiveEffect 是响应式副作用系统的执行器；
watchEffect 传入的 cb 为 null，所以只会执行 getter；
watch 会对 oldValue 和 newValue 做比较。