Vue3.0のさまざまなリスニング方法の包括的な概要

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

// 聞きたい値番号を指定する
      ウォッチ(数値、(値、楕円)=>{
        // val: 新しい値、oval: 以前の値 // console.log(num.value);
        // console.log(val,oval);
      },{//2番目のパラメータobjimmediate,deep
      immediate:true//デフォルトでは、データが変更されたときのみ監視します。
      // 初回作成時は実行されません。true に設定すると初回実行されます。

//statewatch(state,(val,oval)=>{ の下で ID とオブジェクトデータの変更を監視します。
        // console.log('id',val.id,oval);
      },{
        即時:true、
        deep:true//オブジェクト属性値の変更を検出するためにディープモニタリングをオンにします})

// state.uname をリッスンする
      ウォッチ(()=>state.uname,(uname,p)=>{
        // uname の新しい値、p の古い値 console.log(uname,p);
      },{
        即時: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 new、oname old console.log('uname',uname,oname);
      })