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

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 メソッド: firstsecondが変更されると、 getメソッドが呼び出され、 fullの値が更新されます。

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

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

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

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

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

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

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

以下もご興味があるかもしれません:
  • Vue.js の watch メソッドと computed メソッドの違いの詳細な例
  • vue WatchとComputedの使用の概要
  • Vue の computed と watch の違いを理解する方法
  • Vueのcomputedとwatchの違いは何ですか?
  • Vue の watch と computed の詳細な説明
  • Vue における watch と computed の違いと使い方
  • Vue における computed と watch の違い
  • Vue における watch、computed、updated の違いと使い方
  • Vueの計算プロパティとウォッチの違いを簡単に理解する
  • Vue における計算プロパティ、メソッド、監視の違い
  • Vue の computed と watch の類似点と相違点の詳細な説明

<<:  Nginx 構成 80 ポート アクセス 8080 とプロジェクト名アドレス メソッド分析

>>:  異なる列を持つテーブルのクエリ結果のSQLマージ操作

推薦する

Pengyou.com モバイル クライアントのダウンロード ページのデザイン共有 (画像とテキスト)

まずは簡単なデータを見てみましょう。 Googleが発表したレポートによると、 ①中国の都市の97%...

Mac インストール mysqlclient プロセス分析

仮想環境で pip 経由でインストールしてみてください: pip で mysqlclient をイン...

中国における中国語ドメイン名の人気は新たなクライマックスを迎えた

<br />外交部などの中央政府機関、各レベルの地方政府、その他の国家機関や部門が率先し...

ftp は SSH 経由で Linux にリモート接続します

まず Linux に ssh をインストールします。例として Centos を使用します。ポータル:...

純粋なCSSでデジタルプラスとマイナスボタンを実装するための最適なソリューション

序文:デジタル加算ボタンと減算ボタンの実装には、次のような多くのソリューションがこれまでに使用されて...

Linux システムで .sh ファイルを実行する方法

Linux システムで .sh ファイルを実行する方法は 2 つあります。たとえば、ルート ディレク...

ウェブ理論: 考えさせない読書ノート

第 1 章<br /> Web ページをユーザーにとって使いやすいものにするための最も重...

NFS サーバーの原理と、その構築、構成、展開の手順を簡単に分析します。

目次NFS サービスの概要NFS とは何ですか? NFS マウントの原則NFS サーバーはデータ転送...

JS を使用した簡単な雪効果の例の詳細な説明

目次序文主な実装コードHTMLコードJSコード序文南の友達の多くは、雪をほとんど見たことがない、ある...

Nginx Linux のインストールと展開の詳細なチュートリアル

1. Nginx の紹介Nginxは負荷分散やリバースプロキシにも使えるWebサーバーです。現在最も...

データバインディングとリストデータの表示にはVue3を使用する

目次1. Vue2との比較1. Vue3の新機能2. Vue2とVue3の応答原理の比較3. 配列の...

HTML 5 ワーキングドラフトの謎を解く

World Wide Web Consortium (W3C) は、HTML 5 仕様のドラフトをリ...

nginx で複数の仮想ホストを設定する方法の例

nginx で仮想ホスト vhost を設定すると非常に便利です。 nginx設定ファイルnginx...

フレームセットを使用してワイドスクリーンを中央に配置するためのヒントを共有する

コードをコピーコードは次のとおりです。 <フレームセット cols="*,1280,...

CSS3 3Dクールキューブ変形アニメーションの実装

私はコーディングが大好きです。コーディングすると幸せになります!みなさんこんにちは、Counterで...