vue3中watch和watchEffect的区别

watch和watchEffect都是 Vue 3 的侦听 API，但定位不同：watch更“精确监听某个源”，watchEffect更“自动收集依赖做副作用”。

核心区别

• 监听对象
  • watch：你要“明确写出”监听源（ref/getter/数组等）。
  • watchEffect：不写监听源，回调里“用到什么响应式数据就监听什么”（自动依赖收集）。
• 是否立即执行
  • watch：默认不立即执行，需{ immediate: true }才会先执行一次。
  • watchEffect：默认立即执行一次。
• 是否能拿到新旧值
  • watch：回调参数是(newVal, oldVal)，便于做差异逻辑。
  • watchEffect：没有显式(new, old)（本质是“重新跑一遍副作用”）。
• 适用场景
  • watch：适合“某个值变化后做事”，尤其需要 new/old、需要精确控制触发条件时。
  • watchEffect：适合“依赖很多/不确定依赖哪些”的副作用同步（例如根据多个响应式值更新外部状态）。
• 停止与清理
  • 两者都返回stop()可停止。
  • 两者都支持清理副作用：watch的第 3 个参数onInvalidate，watchEffect的参数onCleanup（用法类似，解决请求竞态/取消订阅）。

简单示例对比

watch：明确监听keyword

watch( () => keyword.value, (newK, oldK) => { // 需要 new/old 做对比 }, { immediate: true } )

watchEffect：自动收集依赖

watchEffect((onCleanup) => { // 这里读了 keyword、page，就会自动监听它们 // 适合把多个依赖驱动的副作用写在一起 })

怎么选

• 要“明确监听谁”、要 new/old、要避免误触发 → 用watch
• 依赖多且会变、想省去列依赖、做副作用同步 → 用watchEffect