Vue の計算プロパティとリスナーの使用の概要

1. 計算プロパティとリスナー

1.1 計算プロパティ

<!DOCTYPE html>
<html>
  <ヘッド>
    <メタ文字セット="utf-8">   
    <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
  </head>
  <本文>
    <div id="アプリ">
			<p>{{ メッセージ }}</p>
			<p>{{ 逆メッセージ }}</p>
    </div>
    <スクリプト>
      新しいVue({
        el: '#app',
        データ： {
					メッセージ: 'こんにちは'
        },
				計算: {					
					逆メッセージ: 関数 () {
						this.message.split('').reverse().join('') を返します
					}
					/*
					// 逆メッセージと同等: {
						得る（）{
							this.message.split('').reverse().join('') を返します
						}
					}
					*/
				}
      });
    </スクリプト>
  </本文>
</html>

説明: 計算プロパティで計算プロパティreversedMessageを定義しました。ここで提供される関数は、計算プロパティreversedMessageのゲッター関数として使用されます。

1.2 セッター

計算プロパティにはデフォルトではゲッターしかありませんが、セッターを提供することもできます。

<!DOCTYPE html>
<html>
  <ヘッド>
    <メタ文字セット="utf-8">   
    <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
  </head>
  <本文>
    <div id="アプリ">
			<p>{{ メッセージ }}</p>
			<p>{{ 逆メッセージ }}</p>
			<input type="text" v-model="reversedMessage" />
    </div>
    <スクリプト>
      新しいVue({
        el: '#app',
        データ： {
					メッセージ: 'こんにちは'
        },
				計算: {
					逆メッセージ: {
						得る（）{
							this.message.split('').reverse().join('') を返します
						},
						設定(値){
							this.message = value.split('').reverse().join('')
						}
					}
				}
      });
    </スクリプト>
  </本文>
</html>

1.3 キャッシュ

<!DOCTYPE html>
<html>
  <ヘッド>
    <メタ文字セット="utf-8">   
    <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
  </head>
  <本文>
    <div id="アプリ">
			<p>{{ メッセージ }}</p>
			<p>{{ 逆メッセージ }}</p>
			<p>{{ 逆メッセージ1() }}</p>
    </div>
    <スクリプト>
      新しいVue({
        el: '#app',
        データ： {
					メッセージ: 'こんにちは'
        },
				メソッド: {
					逆メッセージ1: 関数(){
						this.message.split('').reverse().join('') を返します
					}
				},
				計算: {					
					逆メッセージ: 関数 () {
						this.message.split('').reverse().join('') を返します
					}
				}
      });
    </スクリプト>
  </本文>
</html>

注: 計算プロパティとメソッドの両方で同じ効果が得られますが、計算プロパティはリアクティブ依存関係に基づいてキャッシュされます。関連するリアクティブ依存関係が変更された場合にのみ再評価されます。

1.4 リスニング特性

Vue インスタンスの watch プロパティを通じてデータの変更を監視できます。

<!DOCTYPE html>
<html>
  <ヘッド>
    <メタ文字セット="utf-8">   
    <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
  </head>
  <本文>
    <div id="アプリ">
			<p>{{ メッセージ }}</p>
			<button @click="reverse=!reverse">反転</button>
    </div>
    <スクリプト>
      新しいVue({
        el: '#app',
        データ： {
					メッセージ: 'Vue'、
					逆: 偽
        },
				時計：
					// メッセージ: function(newVal, oldVal){
					逆: 関数(newVal){
						コンソールログ(新しい値)
						this.message = this.message.split('').reverse().join('')
					}
				},
      });
    </スクリプト>
  </本文>
</html>

インスタンス属性 vm.$watch を通じて同じ効果を実現できます。

<!DOCTYPE html>
<html>
  <ヘッド>
    <メタ文字セット="utf-8">   
    <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
  </head>
  <本文>
    <div id="アプリ">
			<p>{{ メッセージ }}</p>
			<button @click="reverse=!reverse">反転</button>
    </div>
    <スクリプト>
      var vm = 新しい Vue({
        el: '#app',
        データ： {
					メッセージ: 'Vue'、
					逆: 偽
        }
      });
			
			// vm.$watch('reverse', 関数(newVal, oldVal) {
			vm.$watch('reverse', 関数(newVal) {
				コンソールログ(新しい値)
				this.message = this.message.split('').reverse().join('')
			});
    </スクリプト>
  </本文>
</html>

上記は、Vue の計算プロパティとリスナーの使用の概要の詳細内容です。Vue の計算プロパティとリスナーの詳細については、123WORDPRESS.COM の他の関連記事に注目してください。

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