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)) }) —— 清理逻辑与创建逻辑物理相邻，组件销毁或依赖变时自动调用
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
