watchEffect
在处理复杂异步逻辑时，Vue 3 的 watchEffect 相比传统的 watch 具有以下优势：
1. 自动追踪依赖
watchEffect 会自动收集其回调中使用的所有响应式依赖，无需手动指定监听源：
import { ref, watchEffect } from 'vue';const count = ref(0);
const double = ref(0);watchEffect(() => {// 自动追踪 count 的变化double.value = count.value * 2;// 可以直接在回调中编写异步逻辑fetchData(count.value);
});// 无需显式指定监听源
count.value++; // 触发 watchEffect
2. 副作用清理机制
watchEffect 的回调会返回一个清理函数，用于在副作用重新执行或组件卸载前清理资源（如取消请求）：
watchEffect((onCleanup) => {const controller = new AbortController();fetch(`/api/data?param=${count.value}`, {signal: controller.signal}).then(response => response.json()).then(data => {// 确保数据在请求未被取消时才更新if (!isAborted) {result.value = data;}}).catch(err => {if (err.name !== 'AbortError') {console.error(err);}});// 清理函数：在下一次副作用执行前或组件卸载时调用onCleanup(() => {controller.abort(); // 取消未完成的请求});
});
3. 立即执行与懒执行
watchEffect 默认会立即执行一次回调（相比 watch 的 immediate: true 更简洁），适合需要初始化的异步操作：
// 立即执行一次，之后依赖变化时再次执行
watchEffect(() => {console.log('Effect running');
});
若需要懒执行（类似 watch 默认行为），可使用 watchPostEffect 或 watchSyncEffect。
4. 简化复杂逻辑
对于涉及多个依赖的复杂异步操作，watchEffect 能避免手动维护依赖数组：
const userId = ref(1);
const searchQuery = ref('');watchEffect(() => {// 同时追踪 userId 和 searchQuery 的变化fetchUser(userId.value, searchQuery.value);
});
5. 与组合式 API 深度集成
在 Vue 3 的组合式 API 中，watchEffect 能更好地组织逻辑复用和状态管理：
// 在自定义组合函数中使用 watchEffect
export function useFetchData(initialUrl) {const data = ref(null);const loading = ref(false);const error = ref(null);const url = ref(initialUrl);watchEffect(async (onCleanup) => {loading.value = true;error.value = null;const controller = new AbortController();onCleanup(() => controller.abort());try {const response = await fetch(url.value, { signal: controller.signal });data.value = await response.json();} catch (err) {if (err.name !== 'AbortError') {error.value = err.message;}} finally {loading.value = false;}});return { data, loading, error, setUrl: (newUrl) => url.value = newUrl };
}
何时选择 watchEffect 而非 watch？
| 场景 | watchEffect | watch |
|---|---|---|
| 自动追踪依赖 | ✅（无需指定依赖） | ❌（需显式指定监听源） |
| 需要立即执行副作用 | ✅（默认立即执行） | ❌（需设置 immediate: true） |
| 复杂的异步清理逻辑 | ✅（内置 onCleanup） | ❌（需手动处理） |
| 监听多个响应式变量 | ✅（自动收集所有依赖） | ❌（需分别监听或合并依赖） |
| 仅在依赖变化时执行（非立即执行） | ❌（需使用 watchPostEffect） | ✅（默认行为） |
总结
watchEffect 通过自动依赖追踪、内置清理机制和立即执行特性，大幅简化了复杂异步逻辑的管理。对于需要响应多个状态变化的场景，或需要自动清理副作用的异步操作（如网络请求、定时器），watchEffect 是更优选择。而传统的 watch 则在需要精确控制监听源和监听深度时更具优势。
关键差异对比
| 特性 | watchEffect | watch |
|---|---|---|
| 自动追踪依赖 | ✅ 自动收集所有响应式依赖 | ❌ 必须手动指定监听源 |
| 监听计算属性变化 | ✅ 自动追踪计算属性依赖 | ✅ 但需显式监听计算属性本身 |
| 获取变化前后的值 | ❌ 只能获取当前值 | ✅ 可访问新旧值 (newVal, oldVal) |
| 深度监听 | ❌ 仅浅层追踪 | ✅ 支持 deep: true |
| 初始执行 | ✅ 默认立即执行 | ❌ 默认惰性执行（需 immediate: true） |