Vue3 中 watch 的使用方法

在 Vue3 的响应式系统中，watch 是一个强大的工具，用于监视一个或多个响应式数据的变化，并在数据发生变化时执行相应的操作。下面将详细介绍它的使用方法。

基本用法

watch 接收两个参数，第一个参数是需要监视的数据源，可以是一个响应式数据的引用，也可以是一个返回响应式数据的函数。第二个参数是一个回调函数，当数据源发生变化时，这个回调函数就会被执行。

<template>
  <div>
    <input v-model="message" placeholder="输入一些内容">
    <p>您输入的内容是：{{ message }}</p>
  </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 也可以同时监视多个数据源。只需要将第一个参数改为一个数组，数组中的每个元素都是需要监视的数据源。

<template>
  <div>
    <input v-model="count1" placeholder="输入第一个数字">
    <input v-model="count2" placeholder="输入第二个数字">
    <p>count1: {{ count1 }}, count2: {{ count2 }}</p>
  </div>
</template>

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

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

watch([count1, count2], (newValues, oldValues) => {
  console.log(`新值：${newValues}，旧值：${oldValues}`);
});
</script>

这样，当 count1 或 count2 任何一个发生变化时，回调函数都会执行。

深度监视

对于对象类型的响应式数据，watch 默认是浅监视，即只监视对象的顶层属性变化。如果需要深度监视对象内部的所有属性变化，可以使用 deep 选项。

<template>
  <div>
    <input v-model="user.name" placeholder="输入名字">
    <input v-model="user.age" placeholder="输入年龄">
    <p>名字：{{ user.name }}，年龄：{{ user.age }}</p>
  </div>
</template>

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

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

watch(user, (newValue, oldValue) => {
  console.log(`新值：${newValue}，旧值：${oldValue}`);
}, { deep: true });
</script>

通过设置 deep: true，watch 会深度监视 user 对象的所有属性变化。

Vue3 的 watch 提供了灵活且强大的功能，无论是简单的数据监视还是复杂的响应式逻辑处理，都能很好地满足需求，帮助开发者更高效地构建应用。