Vue3中watch和watchEffect监听的用法

在Vue 3中，watch和watchEffect是用来响应数据变化执行响应式操作的API。

watch用于观察特定的响应式引用或响应式属性，当被观察的源发生变化时，它可以执行异步操作或者分发Vuex的action。

watchEffect则是当依赖的响应式数据发生变化时自动执行一段副作用代码，它不需要指定监听的具体数据，而是在代码内部进行响应式读取。

以下是两者的基本用法示例：

<template>
  <div>
    <input v-model="msg" />
  </div>
</template>
 
<script setup>
import { ref, watch, watchEffect } from 'vue';
 
const msg = ref('');
 
// 使用watch监听特定响应式数据
watch(msg, (newVal, oldVal) => {
  console.log(`msg changed from ${oldVal} to ${newVal}`);
});
 
// 使用watchEffect监听依赖的变化
watchEffect(() => {
  console.log('msg is now:', msg.value);
});
</script>

在这个例子中，watch监听msg变量的变化，而watchEffect在每次msg变化时打印出当前的值。

watch可以指定更多的选项，如immediate（是否在侦听开始之后立即执行回调）和deep（是否深度监听），例如：

watch(msg, {
  handler: (newVal, oldVal) => {
    console.log(`msg changed from ${oldVal} to ${newVal}`);
  },
  immediate: true, // 组件挂载时立即执行
  deep: false // 不深度监听
});

watchEffect也有flush选项，可以指定如何刷新副作用函数，例如pre（在设置响应式数据之前执行）或post（在设置响应式数据之后执行），默认为pre。

watchEffect(() => {
  console.log('msg is now:', msg.value);
}, {
  flush: 'post'
});

这些是watch和watchEffect的基本用法，它们可以根据实际需求进行更复杂的配置。