CompositionAPI中的watch和watchEffect:掌握响应式状态管理的利器

引言

在Vue 3中，Composition API引入了watch和watchEffect，它们是用于响应式状态管理的强大工具。这些功能使开发者能够以简洁且可维护的方式监听和响应数据的变化。在本文中，我们将深入探讨watch和watchEffect的特性、用法和最佳实践。

理解watch

watch函数允许开发者监听数据的变化并执行回调函数。其语法如下：

watch(source: Ref<T> | ComputedRef<T>, callback: (newValue: T, oldValue: T | undefined) => void, options?: WatchOptions): UnwatchFn

其中：

• source：要监听的数据源，可以是Ref或ComputedRef。
• callback：当数据源发生变化时要执行的回调函数。该函数接收两个参数：newValue和oldValue。
• options：可选的选项对象，可以配置额外的行为，例如immediate和deep。

watch的用法

watch函数有几个常见的用法：

1. 监听原始类型的变化：

const count = ref(0);

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

2. 监听响应式对象的属性变化：

const user = reactive({
  name: 'John',
  age: 30
});

watch(user.name, (newValue) => {
  console.log(`User's name changed to ${newValue}`);
});

3. 监听数组或对象的变化：

const numbers = ref([1, 2, 3]);

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

4. 使用immediate选项立即触发回调：

watch(count, (newValue) => {
  console.log(`Count changed to ${newValue}`);
}, { immediate: true });

5. 使用deep选项深度监听对象或数组：

watch(user, (newValue) => {
  console.log(`User object changed to ${JSON.stringify(newValue)}`);
}, { deep: true });

理解watchEffect

watchEffect函数允许开发者创建响应式效果，其行为类似于watch，但具有以下主要区别：

• watchEffect创建的回调函数在每次组件渲染时都会执行。
• watchEffect没有oldValue参数，因为它无法访问前一个渲染周期的值。
• watchEffect自动清理其创建的依赖项。

watchEffect的用法

watchEffect函数的常见用法包括：

1. 创建响应式计算属性：

const name = ref('John');
const age = ref(30);

const fullName = watchEffect(() => {
  return `${name.value} ${age.value}`;
});

2. 执行副作用：

watchEffect(() => {
  document.title = `Current count: ${count.value}`;
});

3. 监听多个数据源：

watchEffect(() => {
  console.log(`Name: ${name.value}, Age: ${age.value}`);
});

watch和watchEffect的最佳实践

使用watch和watchEffect时，遵循以下最佳实践可以确保代码的可维护性和性能：

• 使用watch监听特定数据源的变化。
• 使用watchEffect创建响应式计算属性或执行副作用。
• 避免在watch回调函数中执行昂贵的操作。
• 使用deep选项时要小心，因为它可能会导致性能问题。
• 始终在watch和watchEffect回调函数中使用newValue。
• 使用UnwatchFn来手动取消监听器，以防止内存泄漏。