博客站

在 Vue 3 中，watch 和 watchEffect 都是用于监听响应式数据变化的工具，但它们在用法和行为上有一些关键区别。以下是 watch 和 watchEffect 的主要区别：

1. 监听方式

• watch:
  • 需要显式指定要监听的响应式数据源（ref 或 reactive 对象）。
  • 只有当指定的数据源发生变化时，才会执行回调函数。
• watchEffect:
  • 不需要显式指定要监听的数据源。
  • 立即执行传入的函数，并在函数内部自动追踪所有依赖的响应式数据，依赖变化时重新运行该函数。

2. 回调函数的参数

• watch:
  • 回调函数接收两个参数：新值（newValue）和旧值（oldValue）。
• watchEffect:
  • 回调函数没有参数，因为它自动追踪所有依赖的响应式数据。

3. 立即执行

• watch:
  • 默认情况下，watch 不会立即执行回调函数，除非显式设置 immediate: true。
• watchEffect:
  • 立即执行传入的函数，并在依赖变化时重新运行。

4. 停止监听

• watch:
  • 返回一个停止监听的函数，调用该函数可以停止监听。
• watchEffect:
  • 同样返回一个停止监听的函数，调用该函数可以停止监听。

示例对比

使用 watch:

import { ref, watch } from 'vue';

const count = ref(0);

// 监听 count 的变化
const stopWatch = watch(count, (newValue, oldValue) => {
  console.log(`count changed from ${oldValue} to ${newValue}`);
});

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

// 停止监听
stopWatch();

使用 watchEffect:

import { ref, watchEffect } from 'vue';

const count = ref(0);

// 自动追踪 count 的变化
const stopWatchEffect = watchEffect(() => {
  console.log(`count is: ${count.value}`);
});

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

// 停止监听
stopWatchEffect();

5. 适用场景

• watch:
  • 适用于需要精确控制监听哪些数据源，并且需要访问新旧值的场景。
  • 示例：监听某个特定的 ref 或 reactive 对象的属性变化。
• watchEffect:
  • 适用于不需要显式指定监听数据源，且依赖多个响应式数据的场景。
  • 示例：在函数内部依赖多个响应式数据，并在它们变化时执行某些操作。

6. 性能考虑

• watch:
  • 由于需要显式指定监听的数据源，因此在某些情况下可能更高效。
• watchEffect:
  • 由于自动追踪所有依赖，可能会在某些复杂场景下导致不必要的重新运行。

总结

• watch 适用于需要精确控制监听哪些数据源，并且需要访问新旧值的场景。
• watchEffect 适用于不需要显式指定监听数据源，且依赖多个响应式数据的场景。
• 选择使用 watch 还是 watchEffect 取决于具体的应用场景和需求。通常情况下，watch 更适合处理需要精确控制的监听，而 watchEffect 更适合处理依赖多个响应式数据的场景。