vue watch和 watchEffect
在 Vue 3 中，watch 和 watchEffect 是两个用于响应式地监听数据变化并执行副作用的 API。它们在功能上有一些相似之处，但用途和行为有所不同。以下是对 watch 和 watchEffect 的详细对比和解释：
1. watch
watch 是一个更通用的 API，允许你监听一个或多个响应式数据源的变化，并在数据变化时执行指定的回调函数。它提供了更多的控制能力，例如可以指定监听的数据源、回调函数的执行时机等。
语法
import { watch } from 'vue';
watch(source, callback, options);
source：可以是一个响应式数据源（如ref、reactive对象、getter 函数等）。callback：当监听的数据源发生变化时执行的回调函数。options：可选参数，用于配置watch的行为，例如immediate（是否立即执行回调）、deep（是否深度监听）等。
用途
- 监听单个数据源：可以监听一个
ref或reactive对象的变化。 - 监听多个数据源：可以同时监听多个数据源的变化。
- 控制回调的执行时机：通过
options参数，可以控制回调是否立即执行或是否深度监听。
示例
import { ref, watch } from 'vue';
const count = ref(0);
const name = ref('Kimi');
watch(count, (newVal, oldVal) => {
console.log(`count changed from ${oldVal} to ${newVal}`);
});
watch([count, name], ([newCount, newName], [oldCount, oldName]) => {
console.log(`count changed from ${oldCount} to ${newCount}`);
console.log(`name changed from ${oldName} to ${newName}`);
});
2. watchEffect
watchEffect 是一个更简洁的 API，用于自动收集依赖并执行副作用。它会在首次执行时自动收集依赖，并在依赖变化时重新执行。watchEffect 的行为类似于 watch 的 immediate: true 模式，即回调函数会在首次执行时立即运行。
语法
import { watchEffect } from 'vue';
watchEffect(callback, options);
callback：当依赖的数据源发生变化时执行的回调函数。options：可选参数，用于配置watchEffect的行为，例如flush（控制副作用的执行时机）等。
用途
- 自动收集依赖：
watchEffect会在首次执行时自动收集依赖，并在依赖变化时重新执行。 - 简化代码：适用于不需要显式指定监听数据源的场景，代码更加简洁。
- 立即执行：回调函数会在首次执行时立即运行，类似于
watch的immediate: true模式。
示例
import { ref, watchEffect } from 'vue';
const count = ref(0);
const name = ref('Kimi');
watchEffect(() => {
console.log(`count is ${count.value}`);
console.log(`name is ${name.value}`);
});
3. 区别
| 特性 | watch | watchEffect |
|---|---|---|
| 用途 | 监听特定数据源的变化 | 自动收集依赖并执行副作用 |
| 回调执行时机 | 默认不立即执行（immediate: false） | 默认立即执行 |
| 依赖收集方式 | 显式指定监听的数据源 | 自动收集依赖 |
| 控制能力 | 提供更多控制选项（如 immediate、deep 等） | 更简洁，适合快速实现副作用 |
| 适用场景 | 需要监听特定数据源或控制回调执行时机的场景 | 适合不需要显式指定监听数据源的场景 |
4. 使用建议
watch：- 适用于需要监听特定数据源或控制回调执行时机的场景。
- 通过
options参数，可以实现更复杂的监听逻辑，例如深度监听或立即执行。
watchEffect：- 适用于不需要显式指定监听数据源的场景，代码更加简洁。
- 适合快速实现副作用，特别是在需要立即执行回调的场景中。