Vue 3 での watch と watchEffect の新しい使い方

1. 時計の新しい使い方

オプションAPIでは、watchは

時計：{

 気分(現在の値、現在の値){

  console.log('cur',curVal);//最新の値 console.log('pre',preVal);//前の値を変更}

}

1.1.watch の使用構文

Composition APIでは、 watchを使用する場合は、まずそれをインポートする必要があります。

構文は次のとおりです。

「vue」から{watch}をインポートします

時計（

 名前 、

 ( curVal , preVal )=>{ //ビジネス処理},

 オプション

）

パラメータは 3 つあります。

name : 監視する属性
(curVal,preVal)=>{ //業務處理}矢印関数は、監視されている最新の値と、この変更前の値であり、ここで論理処理が実行されます。
options : ディープリスニングを行うかどうかなどのリスナーの設定項目。

初めてページに入ったときには実行されません。値が変更されると、現在の最新の値と変更前の値が出力されます。

例1 : データのリスニング

「vue」から{ref、watch}をインポートします。

エクスポートデフォルト{

 設定（）{

  定数 mood = ref("")

  //フレームリスナーwatch(mood,(curVal,preVal)=>{

   コンソールにログ出力します。

   コンソールにログ出力します。

  },{

   //設定項目})

  戻る {

   気分

  }

 }

}

watch複数のプロパティ値を監視することもできます。この場合、受信データは配列になり、構成項目は変更されません。

1.2. ウォッチは複数の属性値を監視する

例 2 : 複数のプロパティをリッスンする

ウォッチ([気分,ターゲット],([現在の気分,現在のターゲット],[前の気分,前のターゲット])=>{

 コンソールにログ出力します。

 コンソールにログ出力します。

 コンソールにログ出力します。

 コンソールにログ出力します。

},{

  //設定項目})

1.3. 監視モニター参照データ型

参照データ型watch際に、そのプロパティの1つだけを監視すると、

使用構文は次のとおりです。

watch(()=>obj.name,(curValue,preValue)=>{

 //フレームは参照データ型のプロパティをリッスンします},{

 //設定項目})

最初のパラメータであるコールバック関数は、リッスンする必要があるオブジェクトのプロパティを返します。以下のパラメータは上記と同じです。

例3 : フレームリスンオブジェクト属性

<テンプレート>

 <div>

  {{obj}}

  <input type="text" v-model="obj.name">

 </div>

</テンプレート>

<スクリプト>

「vue」から { ref 、 reactive 、 watch } をインポートします。

エクスポートデフォルト{

 設定（）{

  const obj = reactive({ name:'qq',sex:'女' })

  ウォッチ(()=>obj.name,(cur,pre)=>{

   コンソールにログ出力します。

  },{ })

  戻る {

   オブジェクト

  }

 }

}

</スクリプト>

属性を削除してオブジェクト全体を直接監視しようとすると、 watch無効であることがわかります。この時点で、 watchEffectを導入する必要があります。

2.ウォッチエフェクト

watchEffectフレームリスナーであり、副作用関数でもあります。特定のプロパティを指定する必要がなく、参照されたデータ型のすべてのプロパティを監視します。実行されるとすぐに監視が開始され、コンポーネントがアンインストールされると監視が停止します。

例4 : リスニングオブジェクト

<テンプレート>

  <div>

    {{obj}}

    <input type="text" v-model="obj.name">

    <input type="text" v-model="obj.sex">

  </div>

</テンプレート>

<スクリプト>

「vue」から { reactive 、 watchEffect } をインポートします。

エクスポートデフォルト{

  設定（）{

    obj = reactive({ name:'qq',sex:'女'})とします。

    ウォッチエフェクト(() => {

      console.log('名前',obj.名前);

      console.log('性別' , obj.性別);

    })

    戻る {

      オブジェクト

    }

  }

}

</スクリプト>

watchEffectパラメータにはコールバック関数が 1 つだけあります。この時点でページを更新すると、 watchEffect結果を出力します。

3. 時計と時計効果の違いと関連性

watchとwatchEffectどちらもリスナーですが、それらの関係は何でしょうか?

3.1. 時計の特徴

watchリスニング機能は設定項目を追加したり、空に設定したりすることができます。設定項目が空の場合、

時計の特徴は次のとおりです。

Lazy : 実行時にすぐには実行されません。
より具体的には、監視するプロパティを追加する必要があります。
プロパティの以前の値にアクセスできます。コールバック関数は最新の値と変更前の値を返します。
設定可能: 設定項目を追加できます。

3.2.設定項目を監視する

ウォッチの設定項目は、ウォッチ機能の欠点を補うことができます。設定項目は次のとおりです。

immediate : ウォッチプロパティがすぐに実行されるかどうかを構成します。値が true の場合、実行されるとすぐに実行されます。値がfalseの場合、遅延したままになります。
deep : watch深く監視するかどうかを設定します。値が true の場合、オブジェクトのすべてのプロパティを監視できます。値が false の場合、特定のプロパティに対してより具体的な機能を指定する必要があります。

3.3. watchEffectの機能

watchEffect 副作用関数には次の特性があります。

非遅延: 実行するとすぐに実行されます。
より抽象的: 使用時に誰をリッスンするかを指定する必要はなく、コールバック関数内で直接使用できます。 watch分かりにくいです。
以前の値にアクセスできません: 最新の値にのみアクセスできますが、変更前の値にはアクセスできません。

3.4. watchとwatchEffectの関係

watchの最初の 2 つの機能は、 watchEffectの 2 つの機能と正反対です。watch watch 、構成項目を通じてwatchEffect機能を持つように変更できます。

例5 :監視対象watch

<テンプレート>

 <div>

  {{obj}}

  <input type="text" v-model="obj.name">

 </div>

</テンプレート>

<スクリプト>

「vue」から { ref 、 reactive 、 watch } をインポートします。

エクスポートデフォルト{

 設定（）{

  const obj = reactive({ name:'qq',sex:'女' })

  ウォッチ(()=>obj,(cur,pre)=>{

   コンソールにログ出力します。

  },{ 

   即時:true、

   深い:本当

  })

  戻る {

   オブジェクト

  }

 }

}

</スクリプト>

これで、vue 3 での watch と watchEffect の新しい使用法に関するこの記事は終了です。vue 3 での watch と watchEffect に関するより関連性の高いコンテンツについては、123WORDPRESS.COM で以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

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