Vue 3 中 Watch 与 WatchEffect 的差异与使用场景
在 Vue 3 的组合式 API 中，watch 和 watchEffect 是实现响应式数据监听的核心工具，二者虽都能监听数据变化并执行副作用，但在设计理念、使用方式和适用场景上存在显著差异。以下从核心差异、使用场景和实战示例三个维度展开分析，帮助开发者精准选择合适的监听方式。
一、核心差异对比
| 监听源 | 需显式指定（ref/reactive/数组） | 自动追踪函数内的响应式依赖 |
| 执行时机 | 首次执行默认不触发（可配置） | 立即执行（首次加载即触发） |
| 回调参数 | 能获取新旧值（newValue/oldValue） | 无法直接获取新旧值 |
| 停止监听 | 返回停止函数，或配置 stop | 返回停止函数 |
| 清除副作用 | 支持 onInvalidate 清除 | 支持 onInvalidate 清除 |
| 适用场景 | 精准监听特定数据，需新旧值对比 | 依赖多且无需新旧值，侧重副作用执行 |
1. 监听源：显式 vs 隐式
- watch：需明确指定要监听的数据源（如 ref、reactive 或数组），仅当指定源变化时触发回调。例如：const count = ref(0);
watch(count, (newVal, oldVal) => {
console.log(`Count changed from ${
oldVal} to ${
newVal}`);
}); - watchEffect：无需指定监听源，自动追踪函数内所有响应式依赖。例如：const count = ref(0);
const name = ref(\’John\’);
watchEffect(() => {
console.log(`Count is ${
