compostion-api(setup中） watch使用细节

琹箐

已于 2022-11-03 11:41:29 修改

阅读量602

点赞数

分类专栏：笔记前端文章标签： javascript 前端 java

于 2022-07-22 22:45:16 首次发布

本文链接：https://blog.csdn.net/qq_45327886/article/details/125926407

版权

前端同时被 2 个专栏收录

77 篇文章 3 订阅

订阅专栏

笔记

41 篇文章 0 订阅

订阅专栏

前提（currentOperaMsg是一个响应式对象）

以下所述的watch监听是基于组合式api的，都是写在 setup函数中的

一、监听某一个对象

1.直接监听某个对象:第一个参数直接写即可，第二个参数是一个箭头函数

1)例如：监听对象currentOperaMsg，

// 监听患者信息变化(切换患者时更新患者数据)
    watch(currentOperaMsg, (newval, oldval) => {
      console.log("watch-operaMsg",newval,oldval)
      for(let[key,item] of (Object.entries(simpleInfo))){
        simpleInfo[key].value=currentOperaMsg[key]
      }
    });

2)结果：有点迷惑，新的对象newval和旧的对象值oldval都是变更后的，没有任何不同。

2022/11/03更新

a.要得到变化前的值，第一个参数需要更改为 getter函数并且深度copy一个 currentOperaMsg: ()=>JSON.parse(JSON.stringify(currentOperaMsg))

具体代码如下：

// 监听患者信息变化----------------并且能够正确获取到变更前和变更后的对象
    watch(()=>JSON.parse(JSON.stringify(currentOperaMsg)), (newval, oldval) => {
      console.log("watch-operaMsg",newval,oldval)
      for(let[key,item] of (Object.entries(simpleInfo))){
        simpleInfo[key].value=currentOperaMsg[key]
      }
    });

3）而且发现貌似直接实现了深度监听，因为我只改变了patientname，结果这个watch函数有打印内容。

二、监听对象的一个属性

1.监听对象的某一个属性:第一个参数需要用箭头函数返回

()=>currentOperaMsg.patientname

1）例如：监听对象currentOperaMsg中的属性 patientname

    watch(
      () => currentOperaMsg.patientname,
      (newval, oldval) => {
        console.log('watch-patientname', newval, oldval);
      }
    );

2）结果：正常，更改前后的值是预期的。

三、监听多个对象或对象的属性

1.监听多个值：第一个参数是一个数组，写法和1、2所述一致；

第二个参数也是一个箭头函数，但是箭头函数里面的第一个参数和第二个参数都变成了数组。箭头函数中第一个参数存储变化后的值，第二个参数存储变化前的值

1）例如：监听对象currentOperaMsg 和 currentOperaMsg中的属性 patientname

 watch([currentOperaMsg,()=>currentOperaMsg.patientname],([newOperaMsg,newPatientname],[oldOperaMsg,oldPatientname])=>{
      console.log(newOperaMsg,newPatientname,oldOperaMsg,oldPatientname)
    })

2）结果：如1.2所述，还是一致的。

四、组合式api 监听的到底是什么？

1.监听的必须是响应式对象或者响应式对象的属性（必须是用ref和reactive定义的对象）

普通对象的变化是无法在setup中监听的。例如，下方代码,是不会有任何打印内容的。

    const testObj={
      name:"lyl"
    }
    testObj.name="不知打"
    watch(()=>testObj,(newval,oldval)=>{
      console.log("watch-testObj",newval,oldval)
    },
    {
      deep:true
    })

a.呜呜，这个我是真的突然发现的，但是仔细想想好像确实没有必要监听这种普通对象，因为页面上但凡需要据变量变化修改的一般都会使用响应式变量。

b.更重要的是人家官方文档：直接指明了在组合式API中，watch是用来监听响应式变化的。