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

リスナー

ほとんどの場合、計算プロパティの方が適切ですが、カスタムリスナーが必要な場合もあります。そのため、Vue は、watch オプションを通じてデータの変更に応答するより一般的な方法を提供します。このアプローチは、データが変更されたときに非同期またはコストのかかる操作を実行する必要がある場合に最も役立ちます。

1.ウォッチエフェクト

すぐに実行する、すぐに実行しない

リスニング、watchEffect はすぐに実行されます。即時性はなく、リスニングコンテンツを渡す必要はなく、コードの依存関係を自動的に認識し、パラメータを渡す必要はなく、コールバック関数を渡すだけで済みます。以前の値を取得することはできません。

リスナーを無効にする必要がある場合は、このリスナー関数をコールバックすることができます。

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

2.見る

すぐには実行されませんので、手動で即時実行を開始する必要があります。

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

refのデータソースを聞く
反応的なデータソースを聴く

1.1 聴くための最初の方法

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

1.2 聞く2つ目の方法

// state.uname をリッスンする
      ウォッチ(()=>state.uname,(uname,p)=>{
        // uname の新しい値、p の古い値 console.log(uname,p);
      },{
        即時:true
      })

1.3 複数のデータソースをリスニングする

// 複数のデータ (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);
      })

要約する

Vue3.0のさまざまなリスニング方法についての記事はこれで終わりです。Vue3.0のリスニング方法に関するより関連性の高いコンテンツについては、123WORDPRESS.COMの過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも123WORDPRESS.COMをよろしくお願いいたします。

以下もご興味があるかもしれません: