【Vue3】的【watch】详解

在 Vue 3 中，watch 是一个非常强大的工具，用于观察和响应数据变化。通过它，开发者可以实现更灵活的状态管理和副作用处理。本文将深入探讨 watch 的用法、特性及常见场景。

什么是 `watch`？

watch 是 Vue 3 中的一个 API，用于观察响应式数据的变化并执行特定的回调函数。它允许你在数据变化时执行异步操作、计算新值或触发其他副作用。

基本用法

使用 watch 非常简单。首先，你需要从 Vue 导入 watch：

import { watch } from 'vue';

然后，可以在 setup 函数中使用它：

import { ref, watch } from 'vue';

export default {
  setup() {
    const count = ref(0);

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

    return { count };
  }
};

`watch` 的参数

watch 接受以下参数：

要观察的源：可以是一个响应式引用、一个 getter 函数或多个源的数组。
回调函数：当源的值变化时执行的函数，接收新值和旧值作为参数。
选项对象（可选）：用于配置一些行为，如深度观察、立即执行等。

深度观察

如果你需要观察对象的嵌套属性，可以通过 deep 选项实现深度观察：

const user = ref({ name: 'Alice', age: 30 });

watch(user, (newValue) => {
  console.log('User changed:', newValue);
}, { deep: true });

// 修改嵌套属性
user.value.age = 31; // 会触发 watcher

立即执行

有时你希望在设置观察者时立即执行回调，可以使用 immediate 选项：

watch(count, (newValue) => {
  console.log('Immediate count:', newValue);
}, { immediate: true });

这将立即输出当前 count 的值。

观察多个源

watch 还支持观察多个源，只需将它们放入一个数组中：

const firstName = ref('Alice');
const lastName = ref('Smith');

watch([firstName, lastName], ([newFirstName, newLastName]) => {
  console.log(`Name changed to: ${newFirstName} ${newLastName}`);
});

常见使用场景

表单输入验证：实时验证用户输入，提供反馈。
异步数据请求：当某个状态变化时，触发 API 请求获取新数据。
复杂计算：在数据变化时，执行复杂的计算或数据转换。

注意事项

性能考虑：深度观察会带来性能开销，使用时需谨慎。
响应性丢失：在观察对象属性时，确保使用 ref 或 reactive 包裹，以保持响应性。

【Vue3】 的 【watch】 详解

什么是 watch？