Vue3 中 watch 的使用方法

在 Vue3 的响应式系统中，watch 是一个非常实用的函数，它用于响应式地监听一个或多个数据源的变化，并在数据源变化时执行相应的副作用操作。下面将详细介绍它的使用方法。

基本使用

watch 最基本的用法是监听一个响应式数据的变化。例如，有一个响应式的 ref：

<template>
  <div>
    <input v-model="message">
  </div>
</template>

<script setup>
import { ref, watch } from 'vue';

const message = ref('');

watch(message, (newValue, oldValue) => {
  console.log(`新值: ${newValue}, 旧值: ${oldValue}`);
});
</script>

在上述代码中，watch 监听了 message 的变化。每当 message 的值发生改变时，回调函数就会被触发，打印出新值和旧值。

监听多个数据源

watch 也可以同时监听多个数据源。可以通过数组的形式传入多个响应式数据。

import { ref, watch } from 'vue';

const count1 = ref(0);
const count2 = ref(0);

watch([count1, count2], (newValues, oldValues) => {
  console.log('count1 或 count2 发生了变化');
  console.log('新值:', newValues);
  console.log('旧值:', oldValues);
});

这里，只要 count1 或 count2 其中任何一个值发生变化，watch 的回调函数就会执行。

深度监听

对于对象类型的响应式数据，默认情况下 watch 只会监听对象的引用变化。如果想要监听对象内部属性的变化，需要使用深度监听。

import { ref, watch } from 'vue';

const user = ref({ name: '张三', age: 25 });

watch(user, (newValue, oldValue) => {
  console.log('用户信息发生了变化');
}, { deep: true });

// 修改对象内部属性
user.value.name = '李四';

通过设置 { deep: true } 选项，watch 就能深度监听 user 对象内部属性的变化。

立即执行

有时候我们希望在 watch 一开始就执行一次回调函数，可以使用 immediate 选项。

import { ref, watch } from 'vue';

const number = ref(0);

watch(number, (newValue) => {
  console.log('当前数字:', newValue);
}, { immediate: true });

设置 { immediate: true } 后，在 watch 初始化时，回调函数就会立即执行一次，传入当前 number 的初始值。

Vue3 的 watch 函数为我们提供了强大而灵活的响应式监听功能，在实际项目开发中，合理运用这些特性能够高效地处理数据变化带来的各种业务逻辑。