watchEffect适合自动追踪依赖并立即执行的简单同步副作用，watch则适用于需精准控制触发时机、依赖源和执行逻辑的复杂场景。

watchEffect 和 watch 都用于响应式数据变化的副作用处理，但设计意图和适用场景不同：watchEffect 更适合“自动追踪依赖 + 立即执行”的简单同步副作用；watch 更适合精准控制触发时机、依赖源和执行逻辑的复杂场景。

watchEffect：依赖自动收集，适合“写少点，跑起来就行”

它会自动追踪内部响应式变量的读取，并在它们变化时重新运行整个回调。无需显式声明监听目标，也不区分初始执行与否（默认立即执行）。

• 适合副作用逻辑简单、依赖明确且天然共存的场景，比如日志打印、DOM 更新、局部计算状态同步
• 不能监听深层属性（如 ref.value.xxx），也不能监听多个不相关的响应式源组合
• 无法访问旧值，也不支持异步更新后的清理（除非手动 return 清理函数）
• 示例：watchEffect(() => console.log(state.count, state.name)) —— count 或 name 变，就重打

watch：精准可控，适合“要啥给啥，啥时动啥时动”

必须显式指定监听源（可以是 ref、reactive、getter 函数或数组），支持 deep、immediate、flush 等选项，能拿到新/旧值，也支持异步副作用的 cleanup。

Springboot Vue Builder

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

下载

• 监听对象深层变化？加 deep: true
• 想初始化时也执行一次？加 immediate: true
• 需要对比前后值做条件判断？回调接收 (newVal, oldVal)
• 监听多个不相关源？传入数组：watch([count, user], ([c, u], [oldC, oldU]) => {...})

代码简洁度不是绝对的，而是看“意图是否清晰”

表面上 watchEffect 写得更短，但如果逻辑里混杂了本不该联动的响应式变量，反而导致意外重执行；watch 多几行配置，却让依赖关系一目了然，便于维护和调试。

• 当副作用只依赖 1–2 个紧密关联的响应式值，且无需旧值或深度监听 → watchEffect 更干净
• 当要监听响应式对象某个字段、做防抖、发请求、清理定时器、或依赖来自不同作用域的值 → watch 不可替代
• 别为了“少写两行”强行用 watchEffect 替代 watch，尤其在涉及 API 调用或资源管理时

一个容易忽略的细节：watchEffect 的执行时机更“激进”

它在组件 setup() 同步执行阶段就会运行一次（类似 immediate: true 的 watch），而且只要其中任意被读取的响应式值变化，就整个回调重跑。而 watch 默认只在变化后执行（immediate: false），且可精确控制 flush 时机（pre、post、sync）。

• watchEffect 在模板中读取的值也会被收集（比如 {{ state.count }}），可能引发意料外的触发
• watch 默认不追踪模板渲染依赖，只响应你明确写的监听源
• 若需跳过首次执行，watchEffect 没有内置开关，只能靠额外 flag 手动拦截 —— 这时 watch 的 immediate: false 反而更直接

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！