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

目录

一、监听某一个对象

 二、监听对象的一个属性

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

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

五、总结

---

前提（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都是变更后的，没有任何不同。（我也不知道为什么）

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是用来监听响应式变化的。

五、总结

1.初用，感觉不熟练，记录一下。以便忘记时查阅。

2.特别是  组合式api里  watch只用于箭头响应式对象变化 这点一定要牢记。

3.前面提到的监听一个对象时变化前和变化后的值打印出来  竟然是一模一样的，感觉有些奇怪。和选项式api里面的结果不一致。尚不知道原因，如有大佬知道，欢迎评论告知。

/*

希望对你有帮助！

如有错误，欢迎指正，非常感谢！

*/