Vue3 的 watch 和 watchEffect：深入解析

前言

Vue3 引入了两个强大的特性：watch 和 watchEffect，它们使我们能够高效地响应数据的变化。本文将深入探讨这两个特性的用法和区别，并提供实用示例，帮助您充分利用它们。

watch：监测特定数据源

watch 允许我们监听特定的响应式数据源，并在其值发生变化时执行回调函数。它的语法如下：

watch(source, callback, options)

其中：

• source: 要监听的数据源，可以是 ref 变量或响应式对象。
• callback: 在数据源值发生变化时触发的函数。
• options: 可选的配置对象，允许我们指定立即执行回调函数（immediate: true）或使用延迟执行（flush: 'sync' 或 flush: 'pre'）。

watchEffect：计算和响应数据变化

watchEffect 是一种更通用的机制，它允许我们定义一个计算属性，该属性将在响应式数据发生变化时自动重新计算。它的语法如下：

watchEffect(callback)

其中：

• callback: 计算属性的函数，会在数据发生变化时被调用。

watch 和 watchEffect 的区别

watch 和 watchEffect 的主要区别在于：

• 目标： watch 用于监听特定数据源，而 watchEffect 用于计算和响应数据变化。
• 执行方式： watch 在数据变化时直接执行回调函数，而 watchEffect 重新计算一个计算属性，该属性在数据变化时自动更新。

选择合适的工具

为了选择合适的工具，请考虑以下指南：

• 如果需要监听特定数据源，并且需要在值更改时执行特定操作，请使用 watch。
• 如果需要创建计算属性并对其进行响应，则使用 watchEffect。

优化性能

在使用 watch 和 watchEffect 时，请考虑以下优化技巧：

• 仅监听必要的属性。
• 避免使用 watchEffect 过度，因为它会导致不必要的重新计算。
• 对于延迟更新，使用 flush 选项（例如，flush: 'sync'）。

示例

使用 watch 监听 ref 变量：

const countRef = ref(0);

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

使用 watchEffect 计算响应式属性：

watchEffect(() => {
  const total = countRef.value + 10;
  console.log(`Total: ${total}`);
});

结论

watch 和 watchEffect 是 Vue3 中强大的工具，用于响应数据的变化。通过理解它们的用法和区别，您可以选择合适的工具，并优化您的应用程序的性能。