#Vue 3 watchEffect 自动追踪详解

#一、是什么

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

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

#二、基本用法

复制import { ref, watchEffect } from 'vue'

const count = ref(0)
const doubled = ref(0)

watchEffect(() => {
  // 自动追踪了 count.value
  doubled.value = count.value * 2
  console.log(`count: ${count.value}, doubled: ${doubled.value}`)
})

// 修改 count，会触发 watchEffect 重新执行
count.value++  // => 触发 effect，打印新的值

特点：

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

#三、和 watch 的区别

示例对比：

复制// watchEffect：自动追踪依赖
watchEffect(() => {
  console.log(`count is: ${count.value}`)
})

// watch：需要手动指定依赖
watch(count, (newVal, oldVal) => {
  console.log(`count changed from ${oldVal} to ${newVal}`)
})

#四、适用场景

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

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

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

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

#五、清理副作用

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

复制watchEffect((onCleanup) => {
  const id = setInterval(() => {
    console.log('tick')
  }, 1000)

  // 在下次副作用重新运行前清理
  onCleanup(() => {
    clearInterval(id)
  })
})

#六、注意事项

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

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

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

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

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

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

复制const count = ref(0)

watchEffect(() => {
  console.log('count is:', count.value) // 被追踪
})

count.value++  // => 触发重新执行

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