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。
Element Plus UI Vue3
下载
Element Plus Vue3 桌面组件库。在开发 Vue 3.x 页面时调用，使用 Element Plus 组件（如 el-button、el-input、el-form、el-table 等）。
- 监听对象深层变化？加 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 反而更直接
