---

#watch使用结构
watch(被监视的数据,监视的回调,配置对象(deep,immediate等...))let xxx = ref("1111") 或者 reactive({a:1,b:2})
watch(xxx,(newVal,oldVal)=>{},{ 
deep:true,immediate:true
})

vue3中watch只能监听的以下四种数据:

1. 一个getter函数(一个能返回值的函数)
2. ref定义的值
3. reactive定义的值
4. 包含以上内容的数组`

情况一:监听ref定义的基本类型数据

watch监听ref简单的基本类型数据

代码展示

<template><div class="itemStyle"><div>姓名: <input type="text" v-model="name"></div></div>
</template><script setup lang="ts" name="item">import {ref,reactive,toRefs,toRef,watch} from "vue"let name = ref("小张")watch(name,(newVal,oldVal)=>{console.log("新值:",newVal);console.log("旧值:",oldVal);})
</script>

解除监听案例

<template><div class="itemStyle"><div>当前数量: <span>{{num}}</span></div><div><button @click="handleAdd">添加数量</button></div></div>
</template><script setup lang="ts" name="item">import {ref,reactive,toRefs,toRef,watch} from "vue"let num = ref(1)const handleAdd = ()=>{num.value++}let stopWatch = watch(num,(newVal,oldVal)=>{console.log("我监听了");if(newVal>5){stopWatch()}})
</script>

情况二:监听ref定义的对象类型数据

watch监听ref简单的对象地址值,若想监视对象内部属性的变化，需要手动开启深度监视

代码展示

<template><div class="itemStyle"><div>姓名: <input type="text" v-model="data.name"></div><div>年轻: <input type="text" v-model="data.age"></div><div>打篮球: <input type="text" v-model="data.hobby"></div><div><button type="button" @click="handleChangeData">修改数据</button></div></div>
</template><script setup lang="ts" name="item">import {ref,reactive,toRefs,toRef,watch} from "vue"let data = ref({name:"小张",age:18,hobby:"打篮球"})const handleChangeData = ()=>{data.value = {name:"小红",age:20,hobby:"打乒乓球"}}watch(data,(newVal,oldVal)=>{console.log("新值:",newVal);console.log("旧值:",oldVal);},{deep:true,//开启深度监听})</script>

情况三:监听reactive定义的对象类型数据

特别注意:如果监听reactive定的数据，默认开始深度监听的，不能关闭

代码展示

<template><div class="itemStyle"><div>姓名: <input type="text" v-model="data.name"></div><div>年轻: <input type="text" v-model="data.age"></div><div>打篮球: <input type="text" v-model="data.hobby"></div><div>其他: <input type="text" v-model="data.other.c.d"></div><div><button type="button" @click="handleChangeOtherData">修改其他</button></div><div><button type="button" @click="handleChangeData">修改数据</button></div></div>
</template><script setup lang="ts" name="item">import {ref,reactive,toRefs,toRef,watch} from "vue"let data = reactive({name:"小张",age:18,hobby:"打篮球",other:{a:"1111",b:"2222",c:{d:"1111",e:"2222",}}})const handleChangeData = ()=>{Object.assign(data,{name:"小红",age:20,hobby:"打乒乓球"})}const handleChangeOtherData = ()=>{data.other.c.d="更多内容"}watch(data,(newVal,oldVal)=>{console.log("新值:",newVal);console.log("旧值:",oldVal);})</script>

情况四:监听ref或reactive定义的对象类型数据中某个属性

特别注意:

1. 若该属性值不是【对象类型】，需要写成函数形式
2. 若该属性值是依然是【对象类型】，可直接写，也可以写成函数，建议写成函数。

结论:监视的要是对象里的属性，那么最好写函数式。
注意点:若是对象监视的是地址值，需要关注对象内部，需要手动开启深度监视。

代码展示

<template><div class="itemStyle"><div>姓名: <input type="text" v-model="data.name"></div><div>年轻: <input type="text" v-model="data.age"></div><div>打篮球: <input type="text" v-model="data.hobby"></div><div>其他: <input type="text" v-model="data.other.c.d"></div><div><button type="button" @click="handleChangeOtherData">修改其他</button></div></div>
</template><script setup lang="ts" name="item">import {ref,reactive,toRefs,toRef,watch} from "vue"let data = reactive({name:"小张",age:18,hobby:"打篮球",other:{a:"1111",b:"2222",c:{d:"1111",e:"2222",}}})const handleChangeOtherData = ()=>{data.other.c.d="更多内容"}//监视响应式对象中的某个属性，且该属性是基本类型的，要写成函数watch(()=>data.name,(newVal,oldVal)=>{console.log("新值:",newVal);console.log("旧值:",oldVal);})//监视响应式对象中的某个属性，且该属性是对象类型的，可以直接写，也能写函数，更推荐写函数watch(()=>data.other.c,(newVal,oldVal)=>{console.log("新值:",newVal);console.log("旧值:",oldVal);},{deep:true})</script>

情况五:监听上述多个数据

代码展示

<template><div class="itemStyle"><div>姓名: <input type="text" v-model="data.name"></div><div>年轻: <input type="text" v-model="data.age"></div><div>打篮球: <input type="text" v-model="data.hobby"></div><div>其他: <input type="text" v-model="data.other.c.d"></div><div><button type="button" @click="handleChangeOtherData">修改其他</button></div></div>
</template><script setup lang="ts" name="item">import {ref,reactive,toRefs,toRef,watch} from "vue"let data = reactive({name:"小张",age:18,hobby:"打篮球",other:{a:"1111",b:"2222",c:{d:"1111",e:"2222",}}})const handleChangeOtherData = ()=>{data.other.c.d="更多内容"}//监视，情况五:监视上述的多个数据watch([data.other.c,()=>data.name,()=>data.age,()=>data.hobby],(newVal,oldVal)=>{console.log("新值:",newVal);console.log("旧值:",oldVal);},{deep:true})</script>

✨$踩坑不易，还希望各位大佬支持一下$

📃 $个人主页：$ 沉默小管

📃 $个人网站：$ 沉默小管

📃 $个人导航网站：$ 沉默小管导航网

📃 $我的开源项目：$ vueCms.cn

🔥 $技术交流QQ群：837051545$

👍 $点赞，你的认可是我创作的动力！$

⭐️ $收藏，你的青睐是我努力的方向！$

✏️ $评论，你的意见是我进步的财富！$

如果有不懂可以留言，我看到了应该会回复
如有错误，请多多指教