【Vue3】watch监听使用【超详细】

文章目录

#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><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定义的对象类型数据中某个属性

特别注意:

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:"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}{评论，你的意见是我进步的财富！} 
    
   
 评论，你的意见是我进步的财富！

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