vue3 watch怎么使用

在Vue 3中，`watch`函数用于监听数据的变化并执行相应的操作。它可以用于监视单个数据、多个数据或者计算属性的变化。

使用`watch`函数的基本语法如下：

watch(source, callback, options)

其中，`source`可以是一个响应式数据、一个计算属性或者一个返回响应式数据的函数。`callback`是一个回调函数，当`source`发生变化时会被调用。`options`是一个可选的配置对象，用于指定更多的选项。

下面是一些常见的用法示例：

1. 监听单个响应式数据的变化：

const data = ref(0);

watch(data, (newValue, oldValue) => {
  console.log(`data的值从${oldValue}变为${newValue}`);
});

2. 监听多个响应式数据的变化：

const data1 = ref(0);
const data2 = ref(0);

watch([data1, data2], ([newVal1, newVal2], [oldVal1, oldVal2]) => {
  console.log(`data1的值从${oldVal1}变为${newVal1}`);
  console.log(`data2的值从${oldVal2}变为${newVal2}`);
});

3. 监听计算属性的变化：

const fullName = computed(() => {
  return `${firstName.value} ${lastName.value}`;
});

watch(fullName, (newValue, oldValue) => {
  console.log(`fullName的值从${oldValue}变为${newValue}`);
});

除了基本用法外，`watch`函数还支持一些高级选项，例如`deep`用于深度监听对象内部的变化、`immediate`用于在初始渲染时立即执行回调函数等。你可以根据具体需求查阅Vue 3的官方文档来了解更多详细信息。