watchEffect 是 Vue 3 中自动追踪响应式依赖并首次挂载即执行、变化时重运行的副作用监听工具，适用于“挂载即同步+变化即更新”场景，无需手动指定依赖数组或挂载钩子。
watchEffect 是 Vue 3 中响应式系统提供的一个高效副作用监听工具，它会在组件挂载后自动执行一次，并在所依赖的响应式数据变化时重新运行，天然适合用于“挂载即同步 + 变化即更新”的场景。
watchEffect 的自动触发时机
watchEffect 不需要手动指定监听源，它会自动收集内部读取的响应式变量（如 ref、reactive 的属性），并在组件 setup 执行完成、DOM 挂载前立即执行第一次。这意味着：组件一创建，逻辑就已生效，无需额外判断 mounted 状态。
- 首次执行发生在组件实例创建完毕、但 DOM 尚未完全挂载完成时（接近 onBeforeMount 阶段）
- 后续执行只在 watchEffect 内部访问的响应式数据发生变更时触发
- 如果内部没有读取任何响应式数据，watchEffect 只会执行一次，且不会响应变化
典型用法：挂载后拉取并持续同步远程数据
比如组件需要根据路由参数 id 获取用户信息，并在 id 变化时自动刷新：
vue-composition-api-best-practices
下载
Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。
import { watchEffect, ref } from 'vue'
import { useRoute } from 'vue-router'
export default {
setup() {
const route = useRoute()
const userInfo = ref(null)
const loading = ref(false)
watchEffect(async (onInvalidate) => {
loading.value = true
const id = route.params.id // 自动追踪 route.params.id 的变化
const controller = new AbortController()
onInvalidate(() => controller.abort()) // 清理上一次请求
try {
const res = await fetch(`/api/users/${id}`, { signal: controller.signal })
userInfo.value = await res.json()
} catch (e) {
if (e.name !== 'AbortError') console.error(e)
} finally {
loading.value = false
}
})
return { userInfo, loading }
}
}
与 watch 和 onMounted 的关键区别
对比传统写法，watchEffect 更简洁、不易出错：
- 不用重复写依赖数组：watch 需显式传入 [route.params.id]，漏写或写错会导致不响应
- 免去手动控制执行时机：无需在 onMounted 里调用一次，再用 watch 监听变化 —— watchEffect 一次声明，双重覆盖
- 内置清理机制：通过 onInvalidate 参数可安全取消异步操作（如未完成的请求、定时器），避免内存泄漏或状态污染
注意事项与常见陷阱
watchEffect 强大但需注意使用边界：
- 不要在其中直接修改被追踪的响应式数据（可能引发无限循环），如：userInfo.value = ... 是安全的，但若又在里面读取了 userInfo.value 并再次赋值，需加防抖或条件判断
- 无法监听深层对象的任意属性变化（除非用 reactive 包裹且访问到具体字段），对复杂嵌套建议配合 watch 或 toRef
- SSR 环境中 watchEffect 不会执行（服务端无副作用），需确保逻辑有服务端兼容兜底（如初始 props 注入）
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
