Comprehensive summary of Vue3.0's various listening methods

const stop = watchEffect(()=>{
        // console.log('num:',num.value);
        // console.log('num:',str.value);
      })

//Specify the value num to listen to
      watch(num,(val,oval)=>{
        // val: new value, oval: previous value // console.log(num.value);
        // console.log(val,oval);
      },{//The second parameter obj immediate,deep
      immediate:true//By default, it will monitor only when the data changes.
      // It will not be executed when it is created for the first time. Set it to true and it will be executed for the first time.

//Listen to the changes of id and object data under statewatch(state,(val,oval)=>{
        // console.log('id',val.id,oval);
      },{
        immediate:true,
        deep:true//Turn on deep monitoring to detect changes in object attribute values})

// Listen to state.uname
      watch(()=>state.uname,(uname,p)=>{
        // new value of uname, old value of p console.log(uname,p);
      },{
        immediate:true
      })

//Listen for multiple data (id, uname)
    //()=>state.id, equivalent to //object.values(toRefs(state)) deconstructs const stop = watch([()=>state.id,()=>state.uname],([id,uname],[oid,oname])=>{
        // id new, oid old console.log('id',id,oid);
        // uname new, oname old console.log('uname',uname,oname);
      })