一、Vue3的watch侦听器：

1、基础用法侦听单个数据

1. 导入watch函数
2. 执行watch函数传入要侦听的响应式数据(ref对象)和回调函数

<template><button @click="add">{{ count }}</button>
<template><script>//导入watchimport { ref, watch } from 'vue'const count = ref(0)const add = () => count.value++//调用watch侦听变化//count：ref参数不需要加.valuewatch（count，（newVla，oldVal） => {console.log('旧值为',oldVal,'新值为',newVal)
}）
<script>

2、侦听多个数据

<script setup>// 1. 导入watchimport { ref, watch } from 'vue'const count = ref(0)const name = ref('cp')// 2. 调用watch 侦听变化watch([count, name], ([newCount, newName],[oldCount,oldName])=>{console.log(`count或者name变化了，[newCount, newName],[oldCount,oldName])})
</script>

3、立即监听 （immediate）

        在侦听器创建时立即发出回调，响应式数据变化之后继续执行回调

<script setup>// 1. 导入watchimport { ref, watch } from 'vue'const count = ref(0)// 2. 调用watch 侦听变化watch(count, (newValue, oldValue)=>{console.log(`count发生了变化，老值为${oldValue},新值为${newValue}`)},{immediate: true}) 
</script>

4、深度监听

        通过watch监听的ref对象默认是浅层侦听的，直接修改嵌套的对象属性不会触发回调执行，需要开启deep

<script setup>// 1. 导入watchimport { ref, watch } from 'vue'// 这里有两个属性const state = ref({ count: 0, age: 18 })// 2. 监听对象state 并开启deepwatch(state, ()=>{console.log('数据变化了')},{deep:true})const changeStateByCount = ()=>{// 此时修改可以触发回调state.value.count++}
</script>

5、精确监听       

        开启deep的问题： 它会递归地处理处理所有的值，无论哪个属性被修改都会触发watch回调，这可能会导致不必要的浪费。 

  watch(()=>state.value.name, (newVal, oldVal) => {console.log('name变化了')})

二、区别

1、首先他们都可以监听数据对象和计算属性的变化，Vue3的还可以监听ref和reactive的变化。

2、vue2可以监听单个属性或深度监听整个对象，vue3默认只监听单个属性的变化，不在支持深度监听，如果需要深度监听需要使用deep来实现。

3、vue3中的回调函数可以接受到变化的新值和旧值作为参数，方便进行比较处理。