watchEffect 和 watch 都是 Vue3 中的响应式 API,它们都用于观察响应式数据的变化,但它们的使用方式和行为有所不同。
watchEffect:watchEffect 接受一个函数作为参数,这个函数会立即执行,并响应式地追踪其依赖,并在其依赖变化时重新运行。watchEffect 会自动追踪函数中读取的响应式数据源。
import { ref, watchEffect } from 'vue';
const count = ref(0);
watchEffect(() => {
console.log(count.value);
});
在上述代码中,watchEffect 会自动追踪 count,并在 count 变化时打印其值。
watch:watch 接受两个参数:要观察的数据源和一个回调函数。当数据源变化时,回调函数会被调用。与 watchEffect 不同,watch 允许我们访问前一个和当前的值。
import { ref, watch } from 'vue';
const count = ref(0);
watch(count, (newValue, oldValue) => {
console.log('The new count is: ' + newValue);
console.log('The old count was: ' + oldValue);
});
在上述代码中,watch 会在 count 变化时打印新的和旧的值。
总的来说,watchEffect 更适合没有特定数据源,或者需要观察多个数据源的场景,而 watch 则更适合需要访问前一个和当前值的场景。