Vue3 watch 和 effect 的区别

在 Vue 3 中，watch 和 effect 都是用于处理响应式数据的工具，但它们在用途和功能上有一些区别。

1. watch:

watch 是一个函数，用于监听特定的响应式数据变化，并在数据变化时执行特定的回调函数。它主要用于监听特定数据的变化，并在变化发生时执行一些副作用操作，比如异步请求、数据处理、触发其他逻辑等。watch 的主要特点是可以监控指定的数据，并且可以访问到变化前后的值。

import { watch, reactive } from 'vue';

const state = reactive({
  count: 0,
});

// 监听 state.count 的变化
watch(() => state.count, (newVal, oldVal) => {
  console.log(`count changed from ${oldVal} to ${newVal}`);
});

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

2. effect:

effect 是一个函数，用于创建一个响应式的副作用函数，该函数会自动追踪依赖的响应式属性，并在属性变化时触发执行。它主要用于创建自动追踪的副作用函数，例如自动渲染组件、自动更新状态等。effect 的主要特点是在副作用函数内部会自动追踪响应式数据的变化。

import { effect, reactive } from 'vue';

const state = reactive({
  count: 0,
});

// 创建一个副作用函数，自动追踪 state.count 的变化
const updateCount = effect(() => {
  console.log('Count has changed:', state.count);
});

state.count++; // 输出: "Count has changed: 1"

区别总结：

• watch 用于监听指定的响应式数据，当数据变化时执行指定的回调函数。它适用于需要在数据变化时执行自定义逻辑的情况，且可以访问变化前后的值。
• effect 用于创建响应式的副作用函数，它会自动追踪响应式属性的变化，无需手动指定监听的属性。它适用于自动执行的副作用，例如自动更新 UI 或状态。

通常情况下，如果你需要在数据变化时执行一些自定义逻辑，你可以使用 watch。如果你需要自动追踪响应式数据的变化并执行副作用，你可以使用 effect。