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