vue3中watch监听的应用技巧

在 Vue 3 中，watch 的使用方式与 Vue 2 有所不同，主要是因为 Vue 3 引入了 Composition API，使得状态管理和副作用处理更加灵活和模块化。下面列出了一些 Vue 3 中 watch 监听的应用技巧：

1、监听单一的响应式引用（Ref） 当你有一个 ref 并且想在其值发生变化时执行某些操作，你可以直接使用 watch 函数来监听这个 ref。

   import {
    ref, watch } from 'vue'

   const count = ref(0)

   watch(count, (newValue, oldValue) => {
   
     console.log(`Count changed from ${
     oldValue} to ${
     newValue}`)
   })

2、监听多个响应式引用 如果你想同时监听多个 ref，可以使用一个箭头函数返回一个对象，其中的键对应 ref 名称，值为 ref 本身。

   const count = ref(0)
   const name = ref('John')

   watch<