vue watch和watchEffect区别

文章索引

watch 和 watchEffect 是 Vue 3 中用于响应式数据监听的两种方式，它们的主要区别如下：

1. 监听方式

watch：需要显式指定要监听的数据源（一个或多个），并在数据变化时执行回调函数。
watchEffect：自动追踪回调函数中使用的响应式数据，无需显式指定监听源。

2. 回调触发时机

watch：默认在监听的数据变化后执行回调，可以通过 immediate 选项让回调在初始化时立即执行。
watchEffect：在初始化时立即执行回调，并在其依赖的响应式数据变化时重新执行。

3. 依赖收集

watch：需要手动指定监听的数据源。
watchEffect：自动收集回调函数中使用的响应式数据作为依赖。

4. 返回值

watch：无返回值。
watchEffect：返回一个停止监听的函数。

5. 适用场景

watch：适合监听特定数据的变化并执行特定操作。
watchEffect：适合在依赖的响应式数据变化时自动执行某些逻辑。

示例代码

`watch` 示例

import { ref, watch } from 'vue';

const count = ref(0);

watch(count, (newValue, oldValue) => {
  console.log(`count changed from ${oldValue} to ${newValue}`);
});

count.value++; // 输出: count changed from 0 to 1

import { ref, watch } from 'vue';

const count = ref(0);

watch(count, (newValue, oldValue) => {

console.log(`count changed from ${oldValue} to ${newValue}`);

});

count.value++; // 输出: count changed from 0 to 1

`watchEffect` 示例

import { ref, watchEffect } from 'vue';

const count = ref(0);

watchEffect(() => {
  console.log(`count is: ${count.value}`);
});

count.value++; // 输出: count is: 1

import { ref, watchEffect } from 'vue';

const count = ref(0);

watchEffect(() => {

console.log(`count is: ${count.value}`);

});

count.value++; // 输出: count is: 1

总结

watch：适合精确控制监听的数据和回调执行时机。
watchEffect：适合自动追踪依赖并执行逻辑的场景。

根据具体需求选择合适的方式。