Composition API (in setup) watch usage details

Catalog

One 、 Listen to an object

  Two 、 A property of the listening object

  3、 ... and 、 Listen to multiple objects or object properties

  Four 、 combined api  What on earth is the monitor ？

5、 ... and 、 summary

---

Premise （currentOperaMsg It's a responsive object ）

As described below watch Monitor is Based on combination api Of , It's all written in setup Function

One 、 Listen to an object

1. Listen directly to an object : The first parameter is written directly that will do , The second argument is an arrow function

   1) for example ： listening object currentOperaMsg,

//  Monitor patient information changes ( Update patient data when switching patients )
    watch(currentOperaMsg, (newval, oldval) => {
      console.log("watch-operaMsg",newval,oldval)
      for(let[key,item] of (Object.entries(simpleInfo))){
        simpleInfo[key].value=currentOperaMsg[key]
      }
    });

 2) result ： A little confused , New objects newval And old object values oldval They are all changed , Nothing different .（ I don't know why? ）

3） And found that it seems to directly realize deep monitoring , Because I only changed patientname, As a result, this watch Function has print content .

  Two 、 A property of the listening object

1. A property of the listening object : The first parameter needs to be returned by the arrow function

   ()=>currentOperaMsg.patientname

 1） for example ： listening object currentOperaMsg Properties in patientname

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

 2） result ： normal , The values before and after the change are expected .

  3、 ... and 、 Listen to multiple objects or object properties

1. Listen for multiple values ： The first parameter is an array , Writing and 1、2 The statement is consistent with ;

    The second parameter is also an arrow function , But the first and second parameters in the arrow function become   Array . The first parameter in the arrow function stores the changed value , The second parameter stores the value before the change

1） for example ： listening object currentOperaMsg  and currentOperaMsg Properties in patientname

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

2） result ： Such as 1.2 Described , Still consistent .

  Four 、 combined api  What on earth is the monitor ？

1. The listener must be a responsive object or a property of a responsive object （ It must be with ref and reactive Defined objects ）

  Changes in ordinary objects cannot be made in setup Monitored by . for example , The code below , There will be no printed content .

    const testObj={
      name:"lyl"
    }
    testObj.name=" I don't know how to fight "
    watch(()=>testObj,(newval,oldval)=>{
      console.log("watch-testObj",newval,oldval)
    },
    {
      deep:true
    })

a. Sobbing , I really suddenly found this , But when you think about it, it seems that there is really no need to listen to such ordinary objects , Because on the page, anyone who needs to modify according to the change of variables will generally use   Responsive variable .

b. More importantly, others   Official documents ： It directly indicates that in the combination API in ,watch It is used to listen for responsive changes .

5、 ... and 、 summary

1. Primary use , Feel unskilled , Make a note of . So that when you forget .

2. especially   combined api in   watch Only for arrow responsive object changes This must be kept in mind .

3. The values before and after the change when listening to an object mentioned above are printed   It turned out to be exactly the same , It feels strange . And optional api The results are inconsistent . I don't know why yet , If any big guy knows , Welcome to comment and let us know .

/*

I hope it helps you ！

If there is a mistake , Welcome to correct , Thank you very much ！

*/