Vue の computed と watch の違いを分析する

1. 計算入門

computed 、自己定義変数を監視するために使用されます。変数はdataで宣言されていませんが、 computedで直接定義されており、ページ上で直接使用できます。

//基本的な使用方法 {{msg}}
<input v-model="名前" /> 
  
 //計算されたプロパティ:{
 メッセージ:関数(){
  this.name を返す
 }
}

入力ボックスでは、 name値が変更されると、 msg値も変更されます。これは、 computed自身の属性msgを監視し、 name変更を検出すると、 msg がすぐに更新されるためです。

注意: msg data内で定義できません。定義するとエラーが報告されます。

1.1、get と set の使用方法

<input v-model="full"><br>
<input v-model="first" > <br>
<input v-model="second" > 

データ（）{
 戻る {
  第一に、「美しさ」
  2番目:「シスター」
 }
},
計算:{
 満杯：
  get(){ //現在のプロパティ値を読み取る必要があるときにコールバック関数が実行され、関連するデータに基づいて現在のプロパティの値が計算され、返されます。 return this.first + ' ' + this.second
   },
   set(val){ //現在の属性値の変更を監視し、属性値が変更されたときに実行し、関連する属性データを更新します。let names = val.split(' ')
    this.first = 名前[0]
    this.second = 名前[1]
  }
 }
}

get メソッド: firstとsecondが変更されると、 getメソッドが呼び出され、 fullの値が更新されます。

set メソッド: fullの値が変更されると、 setメソッドが呼び出され、 val fullの最新の値になります。

1.2. 計算された属性キャッシュ

メソッドを通じてデータを結合することによっても、この効果を実現できます。コードは次のとおりです。

<div> {{full() }} </div>
  
データ（）{
 戻る {
  第一に、「美しさ」
  2番目:「シスター」
 }
},
方法:{
 満杯（）{
 this.first + ' ' + this.second を返す
 }
},

ページ内では、データが複数回使用される場合があります。computed computedとmethodメソッドを一緒に実装し、ページ内でデータを複数回参照します。次の効果を確認してください。

<div>
  計算値:
  {{full}} {{full}} {{full}} {{full}}
</div>

<div>
  メソッドは値を計算します:
  {{fullt}} {{fullt}} {{fullt}} {{fullt}}
</div>

データ（）{
 戻る {
  第一に、「美しさ」
  2番目:「シスター」
 }
},
計算:{
 フル:関数(){
  console.log('計算済み')
  this.first + ' ' + this.second を返す
 }
},
方法:{
 フルト(){
  console.log('メソッド')
  this.first + ' ' + this.second を返す
 }
 }

実行結果は次のとおりです。

結果から、メソッドによって取得されたデータは、複数回使用された後に複数回再計算する必要があることが簡単にわかりますが、計算されたプロパティはそうではありません。代わりに、それらは応答依存関係に基づいてキャッシュされ、依存プロパティ値が変更された場合にのみ再計算されます。計算量が少ないため、パフォーマンスが向上します。

2. 時計の紹介

watch 、Vue インスタンス上のデータの変更を監視します。簡単に言えば、 dataで宣言されたデータを検出することです。単純なデータの監視だけでなく、オブジェクトやオブジェクトのプロパティの監視も可能です。

デモ1:シンプルなデータの監視

<input v-model="first" > <br>
  
データ（）{
 戻る {
  第一に、「美しさ」
  }
 },
時計：{
 最初(新しい値、古い値){
 console.log('newVal',newVal) // first の最新の値 console.log('oldVal',oldVal) // first の前の値}
},
// 最初の値を変更すると、最新の値がすぐに印刷されます

デモ2:監視オブジェクト

オブジェクトを監視する場合は、ディープモニタリングを使用する必要があります。

<input v-model="per.name">
  
データ（）{
 戻る {
  あたり:
   名前:'Qianqian',
   年齢:'18'
   }
  }
 },
時計：{
 あたり:
  ハンドラ(古い値、新しい値){
   コンソールログ('newVal',newVal)
   コンソールログ('oldVal',oldVal)
  },
  深い:真、
 }
},

per.nameを変更すると、 newValとoldValの値が同じであることがわかります。これは、それらが格納するポインタが同じ場所を指しているためです。そのため、ディープモニタリングではオブジェクトの変更を監視できますが、特定の属性が変更されたかどうかは監視できません。

デモ3:オブジェクトの単一のプロパティを監視する

// 方法 1: オブジェクトのプロパティを直接参照する <input v-model="per.name">
  
データ（）{
 戻る {
  あたり:
   名前:'Qianqian',
   年齢:'18'
   }
  }
 },
時計：{
 'per.name':function(newVal,oldVal){
   コンソールログ('newVal->',newVal)
   コンソールログ('oldVal->',oldVal)
  }
},

次のように、 computed中間変換として使用することもできます。

// 方法2: 計算値を使用する
<input v-model="per.name">
  
データ（）{
 戻る {
  あたり:
   名前:'Qianqian',
   年齢:'18'
   }
  }
 },
時計：{
 パーネーム(){
  console.log('名前が変更されました')
  }
},
計算:{
 パーネーム:関数(){
  this.per.name を返す
 }
},

デモ4: propsコンポーネントから渡される値を聞く

小道具:{
 mm:文字列
},
//即時使用はしない
時計：{
 mm(新しいV、古いV){
   コンソールログ('newV',newV)
   コンソールログ('oldV',oldV)
 }
}

//即時使用
時計：{
 ミリメートル:{
  即時:true、
  ハンドラ(newV,oldV){
   コンソールログ('newV',newV)
   コンソールログ('oldV',oldV)
  }
}

immediateを使用しない場合、ページが初めてロードされたときに、 watchされているmmでの印刷は実行されません。

immediateを使用すると、初めてロードするときに結果も出力されます: newV 11 oldV undefined 。

immediateの主な機能は、コンポーネントがロードされたときにすぐにコールバック関数をトリガーすることです。

3. 両者の違い

3.1. 計算された

computed監視されるデータはdataで宣言されていません
computed非同期をサポートしていません。computed computed非同期操作がある場合、データの変更を監視することはできません。
computedにはキャッシュがあります。ページが再レンダリングされて値が変更されていない場合は、再計算せずに以前の計算結果が直接返されます。
プロパティが他のプロパティから計算される場合、このプロパティは他のプロパティに依存し、通常はcomputedを使用します。
computedプロパティ値が関数の場合、デフォルトでgetメソッドが使用されます。属性値が属性値である場合、属性にはgetメソッドとsetメソッドがあり、データが変更されるとsetメソッドが呼び出されます。

計算:{
 //プロパティ値は関数です perName:function(){
  this.per.name を返す
 },
 //属性値は属性値フルです:{
  得る（）{ }、
  設定(値){ }
 }
},

3.2. 時計の場合

監視対象データはdataまたはpropsで宣言する必要があります
非同期操作をサポート
キャッシュがない場合、ページは再レンダリングされ、値が変更されていなくても実行されます。
属性値が変更された場合、対応する操作を実行する必要があります
監視対象データが変更されると、他の操作がトリガーされます。この関数には 2 つのパラメータがあります。

immediate : コンポーネントがロードされ、コールバック関数がすぐにトリガーされます
deep : 主に複雑なデータに対する詳細な監視。たとえば、オブジェクトを監視するときに詳細な監視を追加すると、属性値の変更によってそれがトリガーされます。
注:オブジェクトにディープリスニングを追加すると、古い値と新しい値の出力は同じになります。

computedページが再レンダリングされると、計算は繰り返されませんが、 watch再計算されるため、 computedパフォーマンスは高くなります。

IV. 応用シナリオ

数値計算が必要で、他のデータに依存する場合は、 computedのキャッシュ機能を使用して、値が取得されるたびに再計算を回避できるため、 computed使用する必要があります。

非同期操作や、データの変更時にオーバーヘッドの高い操作を実行する必要がある場合は、 watchを使用する必要があります。Computed computed非同期をサポートしていません。操作の実行頻度を制限する必要がある場合は、 computed中間状態として使用できます。

要約:

Vue のcomputedとwatchの違いを分析するこの記事はこれで終わりです。Vue のcomputedとwatchの違いについてさらに詳しく知りたい方は、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続きご覧ください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

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