vue3 watch方法

Vue 3中的watch方法是用于监听数据变化并执行相应操作的功能。它可以监视一个或多个数据的变化，并在数据变化时触发回调函数。下面是对Vue 3中watch方法的介绍：

1. 基本语法：

   watch(source, callback, options)

- source：要监听的数据，可以是一个响应式数据、一个计算属性或一个侦听器函数。
- callback：数据变化时要执行的回调函数。
- options（可选）：配置选项，例如deep、immediate等。

2. 监听响应式数据：

   const data = ref(0);
   watch(data, (newValue, oldValue) => {
     console.log('数据变化了：', newValue);
   });

当data的值发生变化时，回调函数会被触发。

3. 监听计算属性：

   const fullName = computed(() => {
     return `${firstName.value} ${lastName.value}`;
   });
   watch(fullName, (newValue, oldValue) => {
     console.log('计算属性变化了：', newValue);
   });

当计算属性fullName的值发生变化时，回调函数会被触发。

4. 监听侦听器函数：

   watch(() => {
     return [firstName.value, lastName.value];
   }, ([newFirstName, newLastName], [oldFirstName, oldLastName]) => {
     console.log('侦听器函数变化了：', newFirstName, newLastName);
   });

当侦听器函数返回的数据发生变化时，回调函数会被触发。