vue3中watch和watcheffect有何不同
在 Vue 3 中，watch 和 watchEffect 都是用于监听响应式数据变化的 API，但它们的用途和行为有一些关键区别。以下是它们的详细对比：
- 功能概述
-
watch：-
用于监听特定的响应式数据源，并在数据变化时执行回调函数。
-
可以监听单个或多个数据源。
-
提供旧值和新值。
-
-
watchEffect：-
自动追踪其回调函数中使用的响应式数据，并在这些数据变化时重新执行回调。
-
不需要显式指定监听的数据源。
-
不提供旧值，只关注当前值。
-
- 使用方式
2.1 watch
import { ref, watch } from "vue";
const count = ref(0);
watch(count, (newValue, oldValue) => {
console.log(`count 从 ${oldValue} 变为 ${newValue}`);
});
// 修改 count
count.value++;
特点：
-
需要显式指定监听的数据源（如
count）。 -
回调函数接收两个参数：
newValue和oldValue。
2.2 watchEffect
import { ref, watchEffect } from "vue";
const count = ref(0);
watchEffect(() => {
console.log(`count 的值是 ${count.value}`);
});
// 修改 count
count.value++;
特点：
-
不需要显式指定监听的数据源，自动追踪回调函数中使用的响应式数据。
-
回调函数没有参数，无法直接获取旧值。
- 使用场景
3.1 watch 的适用场景
-
需要监听特定数据的变化，默认不立即执行。
-
需要获取变化前后的值（
newValue和oldValue）。 -
需要控制监听的行为（如
immediate、deep等选项）。
3.2 watchEffect 的适用场景
-
需要自动追踪多个响应式数据的变化。
-
不需要旧值，只关注当前值。
-
需要立即执行副作用。
- 高级用法
4.1 watch 的 deep 选项
如果需要监听对象或数组的内部变化，可以使用 deep: true。
const state = reactive({ user: { name: "Alice" } });
watch(
() => state.user,
(newValue, oldValue) => {
console.log("user 发生变化");
},
{ deep: true } // 深度监听
);
4.2 watchEffect 的清理副作用
watchEffect 的回调函数可以返回一个清理函数，用于在重新运行副作用之前执行清理操作。
watchEffect((onCleanup) => {
const timer = setTimeout(() => {
console.log("执行副作用");
}, 1000);
onCleanup(() => {
clearTimeout(timer); // 清理副作用
});
});
- 总结
-
watch：-
适合监听特定数据源，提供旧值和新值。
-
支持
immediate和deep等选项。 -
适用于需要精确控制监听行为的场景。
-
-
watchEffect：-
自动追踪依赖，无需显式指定数据源。
-
默认立即执行，适合执行副作用。
-
适用于需要自动追踪多个响应式数据的场景。
-
根据具体需求选择合适的 API：
-
如果需要监听特定数据并获取旧值，使用
watch。 -
如果需要自动追踪依赖并执行副作用，使用
watchEffect。
更多vue相关插件及后台管理模板可访问vue admin reference，代码详情请访问github
