全面总结Vue3.0的多种侦听方式

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

// 指定主要侦听的值num
      watch(num,(val,oval)=>{
        // val:新值,oval:之前的值
        // console.log(num.value);
        // console.log(val,oval);
      },{//第二个参数obj immediate,deep
      immediate:true//默认就是只有数据改变时才会监听,
      // 第一次创建的时候不会执行,设置成true,第一次就会执行
      })

//侦听state下的id,对象数据的变化
      watch(state,(val,oval)=>{
        // console.log('id',val.id,oval);
      },{
        immediate:true,
        deep:true//开启深度监听,能够侦听到对象属性值的变化
      })

// 侦听state.uname
      watch(()=>state.uname,(uname,p)=>{
        //uname新值,p旧值
        console.log(uname,p);
      },{
        immediate:true
      })

//侦听多个数据(id,uname)
    //()=>state.id,相当于//object.values(toRefs(state))解构了
     const stop = watch([()=>state.id,()=>state.uname],([id,uname],[oid,oname])=>{
        // id新,oid旧
        console.log('id',id,oid);
        // uname新,oname旧
        console.log('uname',uname,oname);
      })