文章目录
情况一:监听ref定义的基本类型数据情况二:监听ref定义的对象类型数据情况三:监听reactive定义的对象类型数据情况四:监听ref或reactive定义的对象类型数据中某个属性情况五:监听上述多个数据
#watch使用结构watch(被监视的数据,监视的回调,配置对象(deep,immediate等...))let xxx = ref("1111") 或者 reactive({a:1,b:2})watch(xxx,(newVal,oldVal)=>{},{ deep:true,immediate:true})vue3中watch只能监听的以下四种数据:
情况一:监听ref定义的基本类型数据
watch监听ref简单的基本类型数据
代码展示
<template> <div class="itemStyle"> <div> 姓名: <input type="text" v-model="name"> </div> <div> <button @click="handleChangeName">修改名称</button> </div> </div></template><script setup lang="ts" name="item"> import {ref,reactive,toRefs,toRef,watch} from "vue" let name = ref("小张")const handleChangeName = ()=>{ name.value="泰罗奥特曼" } 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="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:"打乒乓球" }) }//此时是有问题的：oldVal会和newVal数据保持一致，当data里面的任意值改变，都会触发该监听,强制开启深度监听 //watch(data,(newVal,oldVal)=>{ // console.log("新值:",newVal); // console.log("旧值:",oldVal); //}) //使用()=>箭头函数监听data对象中name属性 watch(()=>data.name,(newVal,oldVal)=>{ console.log("新值:",newVal); console.log("旧值:",oldVal); })</script>情况四:监听ref或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></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:"wwwww", e:"qqqqq", } }//监视响应式对象中的某个属性，且该属性是基本类型的，要写成函数watch(()=>data.name,(newVal,oldVal)=>{ console.log("新值:",newVal); console.log("旧值:",oldVal); })//监视响应式对象中的某个属性，且该属性是对象类型的，可以直接写，也能写函数，更推荐写函数 watch(()=>data.other.c,(newVal,oldVal)=>{ console.log("新值:",newVal); console.log("旧值:",oldVal); })</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:"wwwww", e:"qqqqq", } }//监视，情况五:监视上述的多个数据 watch([data.other.c,()=>data.name,()=>data.age,()=>data.hobby],(newVal,oldVal)=>{ console.log("新值:",newVal); console.log("旧值:",oldVal); },{deep:true})</script>✨ 踩坑不易，还希望各位大佬支持一下 \textcolor{gray}{踩坑不易，还希望各位大佬支持一下} 踩坑不易，还希望各位大佬支持一下
? 个人主页： \textcolor{green}{个人主页：} 个人主页： 沉默小管
? 个人网站： \textcolor{green}{个人网站：} 个人网站： 沉默小管
? 个人导航网站： \textcolor{green}{个人导航网站：} 个人导航网站： 沉默小管导航网
? 我的开源项目： \textcolor{green}{我的开源项目：} 我的开源项目： vueCms.cn
? 技术交流 Q Q 群： 837051545 \textcolor{green}{技术交流QQ群：837051545} 技术交流QQ群：837051545
? 点赞，你的认可是我创作的动力！ \textcolor{green}{点赞，你的认可是我创作的动力！} 点赞，你的认可是我创作的动力！
⭐️ 收藏，你的青睐是我努力的方向！ \textcolor{green}{收藏，你的青睐是我努力的方向！} 收藏，你的青睐是我努力的方向！
✏️ 评论，你的意见是我进步的财富！ \textcolor{green}{评论，你的意见是我进步的财富！} 评论，你的意见是我进步的财富！
如果有不懂可以留言，我看到了应该会回复
如有错误，请多多指教