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：
  • 适用于不需要显式指定监听数据源的场景，代码更加简洁。
  • 适合快速实现副作用，特别是在需要立即执行回调的场景中。