IT评测·应用市场-qidao123.com技术社区

标题: 【Vue3】watch监听使用【超详细】 [打印本页]
作者: 杀鸡焉用牛刀    时间: 2024-8-12 02:42
标题: 【Vue3】watch监听使用【超详细】
  1. #watch使用结构
  2. watch(被监视的数据,监视的回调,配置对象(deep,immediate等...))
  4. let xxx = ref("1111") 或者 reactive({a:1,b:2})
  5. watch(xxx,(newVal,oldVal)=>{
  7. },{
  8. deep:true,immediate:true
  9. })
复制代码
  vue3中watch只能监听的以下四种数据:
    情况一:监听ref定义的基本范例数据

watch监听ref简单的基本范例数据
代码展示
  1. <template>
  2.     <div class="itemStyle">
  3.           <div>
  4.               姓名: <input type="text" v-model="name">
  5.           </div>
  6.           <div>
  7.             <button @click="handleChangeName">修改名称</button>
  8.         </div>
  9.     </div>
  10. </template>
  12. <script setup lang="ts" name="item">
  13.     import {ref,reactive,toRefs,toRef,watch} from "vue"
  14.     let name = ref("小张")
  15.         const handleChangeName = ()=>{
  16.         name.value="泰罗奥特曼"
  17.     }
  18.     watch(name,(newVal,oldVal)=>{
  19.         console.log("新值:",newVal);
  20.         console.log("旧值:",oldVal);
  21.     })
  22. </script>
复制代码
解除监听案例
  1. <template>
  2.     <div class="itemStyle">
  3.           <div>
  4.             当前数量: <span>{{num}}</span>
  5.         </div>
  6.         <div>
  7.             <button @click="handleAdd">添加数量</button>
  8.         </div>
  9.     </div>
  10. </template>
  12. <script setup lang="ts" name="item">
  13.     import {ref,reactive,toRefs,toRef,watch} from "vue"
  14.     let num = ref(1)
  16.     const handleAdd = ()=>{
  17.         num.value++
  18.     }
  20.     let stopWatch = watch(num,(newVal,oldVal)=>{
  21.         console.log("我监听了");
  22.         if(newVal>5){
  23.             stopWatch()
  24.         }
  25.     })
  26. </script>
复制代码
情况二:监听ref定义的对象范例数据

watch监听ref简单的对象范例数据,若想监视对象内下属性的厘革，必要手动开启深度监视
代码展示
  1. <template>
  2.     <div class="itemStyle">
  3.           <div>
  4.               姓名: <input type="text" v-model="data.name">
  5.           </div>
  6.           <div>
  7.               年龄: <input type="text" v-model="data.age">
  8.           </div>
  9.           <div>
  10.               爱好: <input type="text" v-model="data.hobby">
  11.           </div>
  12.         <div>
  13.             <button type="button" @click="handleChangeData">修改数据</button>
  14.         </div>
  15.     </div>
  16. </template>
  18. <script setup lang="ts" name="item">
  19.     import {ref,reactive,toRefs,toRef,watch} from "vue"
  21.     let data = ref({
  22.         name:"小张",
  23.         age:18,
  24.         hobby:"打篮球"
  25.     })
  27.     const handleChangeData = ()=>{
  28.         data.value = {
  29.             name:"小红",
  30.             age:20,
  31.             hobby:"打乒乓球"
  32.         }
  33.     }
  35.     watch(data,(newVal,oldVal)=>{
  36.         console.log("新值:",newVal);
  37.         console.log("旧值:",oldVal);
  38.     },{
  39.         deep:true,//开启深度监听
  40.     })
  42. </script>
复制代码
情况三:监听reactive定义的对象范例数据

特别注意:如果监听reactive对象中的地址值，默认开启深度监听的，不能关闭
代码展示
  1. <template>
  2.     <div class="itemStyle">
  3.           <div>
  4.               姓名: <input type="text" v-model="data.name">
  5.           </div>
  6.           <div>
  7.               年龄: <input type="text" v-model="data.age">
  8.           </div>
  9.           <div>
  10.               爱好: <input type="text" v-model="data.hobby">
  11.           </div>
  12.           <div>
  13.               其他: <input type="text" v-model="data.other.c.d">
  14.           </div>
  15.         <div>
  16.             <button type="button" @click="handleChangeData">修改数据</button>
  17.         </div>
  18.     </div>
  19. </template>
  21. <script setup lang="ts" name="item">
  22.     import {ref,reactive,toRefs,toRef,watch} from "vue"
  24.     let data = reactive({
  25.         name:"小张",
  26.         age:18,
  27.         hobby:"打篮球",
  28.         other:{
  29.             a:"1111",
  30.             b:"2222",
  31.             c:{
  32.                 d:"1111",
  33.                 e:"2222",
  34.             }
  35.         }
  36.     })
  38.     const handleChangeData = ()=>{
  39.         Object.assign(data,{
  40.             name:"小红",
  41.             age:20,
  42.             hobby:"打乒乓球"
  43.         })
  44.     }
  45.         //此时是有问题的：oldVal会和newVal数据保持一致，当data里面的任意值改变，都会触发该监听,强制开启深度监听
  46.     //watch(data,(newVal,oldVal)=>{
  47.      //   console.log("新值:",newVal);
  48.     //    console.log("旧值:",oldVal);
  49.     //})
  50.    
  51.     //使用()=>箭头函数监听data对象中name属性
  52.     watch(()=>data.name,(newVal,oldVal)=>{
  53.         console.log("新值:",newVal);
  54.        console.log("旧值:",oldVal);
  55.     })
  57. </script>
复制代码
情况四:监听ref或reactive定义的对象范例数据中某个属性

特别注意:
结论:监视的要是对象里的属性，那么最好写函数式。
注意点:如果对象监视的是地址值，必要关注对象内部，必要手动开启深度监视。
代码展示
  1. <template>
  2.     <div class="itemStyle">
  3.           <div>
  4.               姓名: <input type="text" v-model="data.name">
  5.           </div>
  6.           <div>
  7.               年龄: <input type="text" v-model="data.age">
  8.           </div>
  9.           <div>
  10.               爱好: <input type="text" v-model="data.hobby">
  11.           </div>
  12.           <div>
  13.               其他: <input type="text" v-model="data.other.c.d">
  14.           </div>
  15.         <div>
  16.             <button type="button" @click="handleChangeOtherData">修改其他</button>
  17.         </div>
  18.     </div>
  19. </template>
  21. <script setup lang="ts" name="item">
  22.     import {ref,reactive,toRefs,toRef,watch} from "vue"
  24.     let data = reactive({
  25.         name:"小张",
  26.         age:18,
  27.         hobby:"打篮球",
  28.         other:{
  29.             a:"1111",
  30.             b:"2222",
  31.             c:{
  32.                 d:"1111",
  33.                 e:"2222",
  34.             }
  35.         }
  36.     })
  38.     const handleChangeOtherData = ()=>{
  39.        data.other.c={
  40.                 d:"wwwww",
  41.                 e:"qqqqq",
  42.             }
  43.     }
  45.         //监视响应式对象中的某个属性，且该属性是基本类型的，要写成函数
  46.         watch(()=>data.name,(newVal,oldVal)=>{
  47.         console.log("新值:",newVal);
  48.         console.log("旧值:",oldVal);
  49.     })
  50.        
  51.         //监视响应式对象中的某个属性，且该属性是对象类型的，可以直接写，也能写函数，更推荐写函数
  52.     watch(()=>data.other.c,(newVal,oldVal)=>{
  53.         console.log("新值:",newVal);
  54.         console.log("旧值:",oldVal);
  55.     })
  57. </script>
复制代码
情况五:监听上述多个数据

代码展示
  1. <template>
  2.     <div class="itemStyle">
  3.           <div>
  4.               姓名: <input type="text" v-model="data.name">
  5.           </div>
  6.           <div>
  7.               年龄: <input type="text" v-model="data.age">
  8.           </div>
  9.           <div>
  10.               爱好: <input type="text" v-model="data.hobby">
  11.           </div>
  12.           <div>
  13.               其他: <input type="text" v-model="data.other.c.d">
  14.           </div>
  15.         <div>
  16.             <button type="button" @click="handleChangeOtherData">修改其他</button>
  17.         </div>
  18.     </div>
  19. </template>
  21. <script setup lang="ts" name="item">
  22.     import {ref,reactive,toRefs,toRef,watch} from "vue"
  24.     let data = reactive({
  25.         name:"小张",
  26.         age:18,
  27.         hobby:"打篮球",
  28.         other:{
  29.             a:"1111",
  30.             b:"2222",
  31.             c:{
  32.                 d:"1111",
  33.                 e:"2222",
  34.             }
  35.         }
  36.     })
  38.     const handleChangeOtherData = ()=>{
  39.         data.other.c={
  40.                 d:"wwwww",
  41.                 e:"qqqqq",
  42.             }
  43.     }
  44.         //监视，情况五:监视上述的多个数据
  45.     watch([data.other.c,()=>data.name,()=>data.age,()=>data.hobby],(newVal,oldVal)=>{
  46.         console.log("新值:",newVal);
  47.         console.log("旧值:",oldVal);
  48.     },{deep:true})
  50. </script>
复制代码
  ✨                                                   踩坑不易，还希望各位大佬支持一下                                            \textcolor{gray}{踩坑不易，还希望各位大佬支持一下}                     踩坑不易，还希望各位大佬支持一下





欢迎光临 IT评测·应用市场-qidao123.com技术社区 (https://dis.qidao123.com/) Powered by Discuz! X3.4