watch用于精准监听指定响应式数据，支持新旧值对比、深度监听和资源清理；watchEffect自动追踪依赖，适合简洁同步副作用，但无法区分具体变化源。
Vue 3 中，watch 和 watchEffect 都用于处理响应式数据变化带来的副作用，但它们的监听逻辑、触发时机和适用边界完全不同。选错 API 容易导致重复执行、漏触发、清理失败或性能浪费。
watch：显式指定目标，适合精准控制
你需要明确告诉 Vue “监听谁”，它才响应。这种写法清晰、可控，尤其适合需要新旧值对比、深度监听、防抖或资源清理的场景。
- 监听单个 ref：
watch(count, (newVal, oldVal) => {...})—— 可直接拿到变化前后的值 - 监听 reactive 对象的某个属性：
watch(() => state.user.name, (name) => {...})—— 比直接监听整个对象更轻量、更准确 - 监听多个不相关源：
watch([searchKey, filterType], ([k, f], [oldK, oldF]) => {...})—— 适用于组合条件触发的逻辑（如搜索+筛选联动） - 常用配置：
{ immediate: true }实现初始化时也执行；{ deep: true }监听嵌套属性变更；{ flush: 'post' }延迟到 DOM 更新后执行
watchEffect：自动收集依赖，适合简洁同步副作用
你只写副作用逻辑，Vue 自动扫描其中读取的所有响应式变量，并在任一变量更新时重跑整个函数。它默认立即执行一次，且无法区分“是哪个值变了”。
- 典型用法：
watchEffect(() => console.log(state.count, state.status))—— count 或 status 变，都触发 - 适合日志打印、DOM 样式同步、局部计算状态更新等轻量操作
- 支持清理机制：
watchEffect((onInvalidate) => { const timer = setTimeout(...); onInvalidate(() => clearTimeout(timer)); }) - 注意陷阱：如果函数里无意读取了不该关联的响应式数据（比如一个全局 token），会导致本不该触发的重执行
关键区别一眼看懂
watchEffect 不会告诉你“谁变了”，只负责“有东西变了就重来”；watch 则始终清楚“我盯的就是这个，变我才动”。
立即学习“前端免费学习笔记（深入）”；
- 是否需新旧值？→ 选 watch
- 是否要初始化执行？→ watchEffect 默认就做；watch 需加
immediate: true - 是否监听深层嵌套对象？→ watch 加
deep: true；watchEffect 默认不深挖，加{ deep: true }选项才支持（Vue 3.4+） - 是否涉及异步请求或定时器管理？→ watch 更稳妥，cleanup 语义更明确，配合
onInvalidate更易维护
怎么选？看副作用意图是否明确
如果副作用只围绕 1–2 个紧密关联的响应式值，且无需旧值、不涉及异步资源管理，watchEffect 写起来干净利落；一旦逻辑变复杂——比如要判断“只有从空到非空才发请求”“修改用户名时取消上一个 pending 请求”“监听表单字段 + 提交按钮状态组合”——watch 的显式性和可预测性就是不可替代的。
