Vue 3 watchEffect 自动追踪详解

一、是什么

• watchEffect 是 Vue 3 Composition API 提供的一个响应式副作用（side effect）函数。
• 它会 立即执行一次回调函数，并且在回调函数中访问到的所有响应式数据（ref、reactive、computed 等）都会被 自动追踪。
• 当这些依赖的响应式数据发生变化时，回调会重新执行。

简单理解：watchEffect 能“自动发现”它用到的响应式变量，不需要手动指定依赖。

---

二、基本用法

复制 1import { ref, watchEffect } from 'vue'
 2
 3const count = ref(0)
 4const doubled = ref(0)
 5
 6watchEffect(() => {
 7  // 自动追踪了 count.value
 8  doubled.value = count.value * 2
 9  console.log(`count: ${count.value}, doubled: ${doubled.value}`)
10})
11
12// 修改 count，会触发 watchEffect 重新执行
13count.value++  // => 触发 effect，打印新的值

特点：

• 第一次立即执行
• 访问到的响应式依赖会被自动收集
• 依赖变化时自动重新运行

---

三、和 watch 的区别

对比点	watchEffect	watch
依赖声明	自动收集	需要显式传入
首次执行	立即执行一次	默认不执行（immediate: true 可立即执行）
参数	没有新值/旧值参数	回调接收 (newVal, oldVal)
典型场景	副作用逻辑	精确监听变量变化

示例对比：

复制 1// watchEffect：自动追踪依赖
 2watchEffect(() => {
 3  console.log(`count is: ${count.value}`)
 4})
 5
 6// watch：需要手动指定依赖
 7watch(count, (newVal, oldVal) => {
 8  console.log(`count changed from ${oldVal} to ${newVal}`)
 9})

---

四、适用场景

1. 副作用逻辑（日志、DOM 操作、API 调用）

2. 计算或赋值（类似 computed，但更灵活）

   复制 1const count = ref(0)
    2const double = ref(0)
    3watchEffect(() => {
    4  double.value = count.value * 2
    5})

3. 调试（快速观察响应式数据变化）

---

五、清理副作用

某些副作用需要在重新执行前清理，例如定时器：

复制 1watchEffect((onCleanup) => {
 2  const id = setInterval(() => {
 3    console.log('tick')
 4  }, 1000)
 5
 6  // 在下次副作用重新运行前清理
 7  onCleanup(() => {
 8    clearInterval(id)
 9  })
10})

---

六、注意事项

1. 不要在 effect 内修改自己依赖的值

   复制 1// ❌ 会导致死循环
    2watchEffect(() => {
    3  count.value++
    4})

2. 可能会频繁触发 → 谨慎在里面写耗时逻辑

3. 依赖收集是动态的 → 只有运行时访问到的才会被追踪

---

七、console.log 也会触发追踪吗？

是的。只要访问了响应式数据（如 count.value），就会被追踪，即使只是打印：

复制 1const count = ref(0)
 2
 3watchEffect(() => {
 4  console.log('count is:', count.value) // 被追踪
 5})
 6
 7count.value++  // => 触发重新执行

总结：访问响应式数据就会触发依赖收集，哪怕只是 console.log。