Vue 数据监听怎么使用 watchEffect 自动追踪副作用函数内部的依赖-Vue.js-PHP中文网

watcheffect的核心价值是自动追踪回调中同步访问的响应式数据并立即执行，适合发请求、更新ui等副作用场景；需注意异步代码后访问的值不会被追踪，支持自动清理和手动停止。

vue 数据监听怎么使用 watcheffect 自动追踪副作用函数内部的依赖

watchEffect 的核心价值，就是不用你告诉它监听谁，它自己看函数里用了什么，就盯住什么。

它适合那些“只要数据一变，我就要立刻做点事”的场景，比如发请求、更新状态、同步 UI、启动/清理定时器等，逻辑集中、依赖动态、不想写一堆 watch 声明。

watchEffect 怎么自动追踪依赖？

它靠的是 Vue 响应式系统的底层机制：
当你在 watchEffect 的回调函数里读取一个 ref 或 reactive 的属性（比如 count.value、user.name），Vue 就会在那个时刻悄悄记下：“这个 effect 正在用这个响应式字段”。
一旦这个字段后续被修改（触发 setter），Vue 就知道该重新跑一遍这个 effect 了。

✅ 关键点：只追踪同步执行阶段访问的响应式数据。
❌ await 之后、try/catch 里、或者异步回调（如 setTimeout）中访问的响应式值，不会被追踪。

const search = ref('')
const page = ref(1)

watchEffect(async () => {
  console.log(search.value) // ✅ 被追踪
  if (!search.value) return

  // ⚠️ 下面这行不会触发重新执行！page.value 变化时，这个 effect 不会再跑
  const res = await fetch(`/api?q=${search.value}&page=${page.value}`)
  data.value = await res.json()
})

想让 page 也被监听？得把它放到 await 前面：

watchEffect(async () => {
  console.log(search.value, page.value) // ✅ 两个都被追踪
  if (!search.value) return
  const res = await fetch(`/api?q=${search.value}&page=${page.value}`)
  data.value = await res.json()
})

怎么用才更稳、更可控？

立即执行 + 自动重跑：定义即运行，不用配 immediate: true。

check-vue-style
检查 .vue 单文件组件的 CSS 规范问题并给出提示，适用于样式检查、CSS审查和 Vue 页面质量巡检。

下载
返回 stop 函数：随时手动停掉，避免组件卸载后还执行（虽然组件 unmount 时也会自动清理）。
```
const stop = watchEffect(() => { /* ... */ })
// 比如在某个条件满足时停掉
if (someCondition) stop()
```

支持副作用清理：回调函数可以返回一个清理函数，在下次执行前或停止前调用。

watchEffect((onInvalidate) => {
  const timer = setTimeout(() => {
    console.log('done')
  }, 1000)

  onInvalidate(() => {
    clearTimeout(timer) // 上次还没结束，就先清掉
  })
})

注意：Vue 3.4+ 推荐直接 return () => { ... }，更简洁：
watchEffect(() => {
const timer = setTimeout(() => { /* ... */ }, 1000)
return () => clearTimeout(timer)
})