watchEffect 能自动追踪依赖、默认立即执行、直接读取 reactive 深层属性、内聚副作用清理，替代 watch 中手动列依赖、immediate 配置、getter 包装和外部清理等冗余操作。

watchEffect 能直接替代 watch 中那些“手动列依赖 + 配置 immediate + 深度监听”的冗长组合，让代码更轻、更稳、更少出错。

自动追踪依赖，不用手写依赖数组

watch 要监听多个 ref 或 reactive 属性时，必须显式传入数组，漏一个就失效：

• ❌ watch([name, age, gender], () => {...}) —— 新增 hobby 后忘了加进去，变化不响应
• ✅ watchEffect(() => { info.value = `${name.value} ${age.value} ${gender.value} ${hobby.value}` }) —— 所有被读取的响应式值自动纳入依赖，增删字段无需改监听逻辑

默认立即执行，省掉 immediate: true

初始化就要拉数据、设标题、同步状态？watch 得加配置项，watchEffect 天然支持：

Springboot Vue Builder

从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。

下载

• ❌ watch(userId, fetchUser, { immediate: true })
• ✅ watchEffect(() => fetchUser(userId.value)) —— 组件一挂载就触发，后续 userId 变也触发，一次写清

监听 reactive 对象任意属性，不用套 getter

watch 监听 reactive 的某个字段，必须写 () => obj.field；深层嵌套或动态路径更麻烦。watchEffect 直接读就行：

立即学习“前端免费学习笔记（深入）”；

• ❌ watch(() => form.user.profile.avatar, updatePreview)
• ✅ watchEffect(() => { updatePreview(form.user.profile.avatar) }) —— 不用包装，也不用担心深层属性变更是否被捕捉（只要你在函数里访问了它）

副作用清理更自然，onInvalidate 内聚在逻辑块里

watch 的清理需靠额外变量 + onBeforeUnmount，容易遗漏或错配；watchEffect 把清理和业务逻辑写在一起：

• ❌ 手动管理定时器 ID 和卸载钩子
• ✅ watchEffect((onInvalidate) => { const timer = setTimeout(...); onInvalidate(() => clearTimeout(timer)) }) —— 清理逻辑与创建逻辑物理相邻，组件销毁或依赖变时自动调用