vue3 watch 监听

Vue 3 中的 `watch` 函数用于监听数据的变化，并在数据发生变化时执行相应的回调函数。它可以监听单个数据的变化，也可以监听多个数据或者数组的变化。

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

watch(要监听的数据, 回调函数, 配置项)

其中，要监听的数据可以是一个响应式的数据，或者是一个返回响应式数据的函数。回调函数会在数据发生变化时被调用，它接收两个参数：新值和旧值。配置项是一个可选的对象，用于设置更多的选项。

举个例子，如果要监听一个响应式数据 `count` 的变化，可以这样写：

watch(() => count, (newVal, oldVal) => {
  console.log(`count 从 ${oldVal} 变为 ${newVal}`);
})

如果要监听多个数据的变化，可以使用数组或对象的形式：

watch([data1, data2], ([newData1, newData2], [oldData1, oldData2]) => {
  console.log(`data1 从 ${oldData1} 变为 ${newData1}`);
  console.log(`data2 从 ${oldData2} 变为 ${newData2}`);
})

除了基本的用法外，`watch` 函数还支持一些常用的配置项，如：`immediate`、`deep`、`flush` 等。这些配置项可以根据具体需求进行设置，用于控制回调函数的执行时机和行为。

希望以上内容能够帮助到你！如有更多疑问，请继续提问。