watch是显式监听、惰性执行、可获新旧值；watcheffect是自动追踪依赖、立即执行、不提供旧值，适用于多依赖联动或初始化即需响应的场景。

核心就一句话：watch 是你指哪打哪，watchEffect 是它自己盯住所有用到的响应式数据，一动就执行。

监听方式不同：显式指定 vs 自动追踪

watch 必须明确告诉 Vue 监听谁，比如一个 ref、一个 reactive 对象的某个属性，或者多个值组成的数组。它只在你列出的来源变化时触发。

• 监听单个 ref：watch(count, (newVal, oldVal) => {...})
• 监听对象某属性（推荐）：watch(() => state.name, (newName, oldName) => {...})
• 监听多个值：watch([a, b], ([newA, newB], [oldA, oldB]) => {...})

watchEffect 完全不关心你监听谁，只看你函数里读了哪些响应式变量。只要其中任意一个变了，整个函数就重跑一次。

• 自动覆盖多个依赖：watchEffect(() => console.log(count.value, name.value))
• 哪怕后续加了新依赖（比如又用了 age.value），也不用改监听列表

执行时机和参数差异明显

watch 默认不立即执行，只在被监听的数据首次变化时才触发；加 { immediate: true } 才能首屏就跑一次。回调里能直接拿到新值和旧值，适合做对比判断。

watchEffect 一创建就立刻执行一次（用来收集依赖），之后每次依赖更新都再执行。但它不提供旧值——你看到的始终是当前最新状态。

vue-admin-change-reviewer

审查 Vue 管理后台的变更请求（Vue 2 + Element UI，Vue 3 + Element Plus）。重点关注最小化变更实现、上线风险检查以及回归检查清单生成。

下载

• 需要“从 A 变成 B”才发请求？用 watch
• 只要 count 或 name 一变，就刷新日志或同步 UI？用 watchEffect 更简洁

适用场景怎么选

用 watch 的典型情况：

• 搜索框输入后，仅当关键词真正变化才调接口（需比对新旧值）
• 表单校验：监听某个字段，值变且不为空时显示错误提示
• 路由参数变更时重新拉取详情（watch(() => route.params.id, ...)）

用 watchEffect 的典型情况：

• 页面加载时立刻获取用户信息，并在 token 或 locale 变化时自动刷新
• 多个状态共同影响一个计算结果（比如筛选条件 + 排序字段），不想手动列全依赖
• 调试用：快速观察几个响应式变量当前值，随变随印

额外但关键的细节

两者都支持副作用清理（onInvalidate），比如发起请求后旧请求要取消；也都返回停止函数，可手动控制生命周期。

watch 在监听 reactive 对象时，默认不响应深层变化，得加 { deep: true }；而 watchEffect 天然追踪所有层级访问，但要注意别无意中读取了不该触发更新的大对象属性。

性能上，watch 更轻量可控，watchEffect 更方便但可能因隐式依赖变多而意外重执行。

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