Vue.js の計算プロパティ、監視プロパティ、ライフサイクルの詳細な説明

序文

この章では、Vue における 2 つの非常に重要な計算プロパティ、監視プロパティ、およびライフサイクルについて説明します。無駄なことはせずに、要点だけを述べましょう。

計算されたプロパティ

計算プロパティの紹介

テンプレートでは、補間構文を使用して、データ内の一部のデータを直接表示できます。場合によっては、データを表示する前に変換または計算する必要があります。計算には、computed オプションを使用できます。この時点で、関数を定義して直接呼び出すことができるのに、なぜ計算属性が必要なのかと尋ねる人もいるかもしれません。この質問については以下で説明します。まずは計算プロパティの使い方を見てみましょう。

入門ケース

必要

人の名と姓を連結する

コード

<!DOCTYPE html>
<html>
	<ヘッド>
		<メタ文字セット="utf-8">
		<タイトル></タイトル>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<本文>
		<div id="アプリ">
			<!-- オリジナルの接合方法 -->
			<p>{{fastName}} {{lastName}}</p>
			<!-- テンプレート構文での計算 -->
			<p>{{ファーストネーム + " " + ラストネーム}}</p>
			<!-- 関数計算を呼び出す -->
			<p v-text="fullName2()"></p>
			<!-- 計算プロパティを使用して計算 -->
			<p>{{fullName1}}</p>
		</div>
	</本文>
	<script type="text/javascript">
		var アプリ = 新しい Vue({
			el: "#app",
			データ： {
				fastName: "トレイシー",
				姓: "McGrady"
			},
			計算: {
				フルネーム1: 関数(){
					this.fastName + " " + this.lastName を返します
				}
			},
			メソッド: {
				フルネーム2: 関数(){
					this.fastName + " " + this.lastName を返します
				}
			}
			
		})
	</スクリプト>
</html>

効果

統計価格事例

コード

<!DOCTYPE html>
<html>
	<ヘッド>
		<メタ文字セット="utf-8">
		<タイトル></タイトル>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<本文>
		<div id="アプリ">
			<p>{{合計価格}}</p>
		</div>
	</本文>
	<script type="text/javascript">
		var アプリ = 新しい Vue({
			el: "#app",
			データ： {
				書籍: [
					{id: 100、名前: 'Unixプログラミングの芸術'、価格: 119}、
					{id: 200、名前: 'Java プログラミングのアイデア'、価格: 105}、
					{id: 300、名前: '高並行プログラミング'、価格: 98}、
					{id: 400、名前: 'Spring5'、価格: 99}、
				]
			},
			計算: {
				合計価格: 関数(){
					結果を 0 にします。
					// 通常のループ /* for(let i = 0;i < this.bookes.length;i++){
						結果 += this.bookes[i].price;
					} */
					
					// 拡張 for ループ、i はインデックスです /* for(let i in this.bookes){
						結果 += this.bookes[i].price;
					} */
					// ES6 は for ループを追加してオブジェクトを直接取得します for(let book of this.bookes){
						結果 += 本の価格
					}
					結果を返します。
				}
			}
		})
	</スクリプト>
</html>

ゲッターメソッドとセッターメソッド

導入

計算プロパティを記述する完全な方法には、実際には getter メソッドと setter メソッドが含まれます。fullName オブジェクトを宣言します。通常は値を取得するだけなので、省略して上記の場合のように記述します。データを取得するときは get メソッドを呼び出し、データを設定するときは set メソッドを呼び出します。

コード

<!DOCTYPE html>
<html>
	<ヘッド>
		<メタ文字セット="utf-8">
		<タイトル></タイトル>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<本文>
		<div id="アプリ">
			<p>{{fullName}}</p>
		</div>
	</本文>
	<script type="text/javascript">
		var アプリ = 新しい Vue({
			el: "#app",
			データ： {
				ファーストネーム: "トレイシー",
				姓: "McGrady"
			},
			// 計算されたプロパティ computed: {
				// オブジェクト fullName を計算します:{
					//データセットを設定する: function(){
						コンソールログ('---');
					},
					// データを取得する get: function(){
						this.firstName + " " + this.lastName を返します。
					}
				}
			}
		})
	</スクリプト>
</html>

計算プロパティキャッシュ

ここでは、メソッドと計算の違いについての質問に答えます。次のコードでは、補間構文、メソッド、および計算プロパティを使用してデータをレンダリングします。

コード

<!DOCTYPE html>
<html>
	<ヘッド>
		<メタ文字セット="utf-8">
		<タイトル></タイトル>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<本文>
		<div id="アプリ">
			<!-- オリジナルの方法ですが、データ計算が面倒なのでお勧めできません。 -->
			<p>名前: {{name}} 仕事: {{job}}</p>
			<!-- メソッド、データが取得されるたびに関数を 1 回呼び出します -->
			<p>{{getInfo1()}}</p>
			<p>{{getInfo1()}}</p>
			<p>{{getInfo1()}}</p>
			<p>{{getInfo1()}}</p>
			<!-- 計算メソッド。データが変更されていない場合は 1 回だけ呼び出され、データはキャッシュされます -->
			<p>{{getInfo2}}</p>
			<p>{{getInfo2}}</p>
			<p>{{getInfo2}}</p>
			<p>{{getInfo2}}</p>
			<p>{{getInfo2}}</p>
		</div>
	</本文>
	<script type="text/javascript">
		var アプリ = 新しい Vue({
			el: "#app",
			データ： {
				名前:「マディ」
				職業：「NBAスター」
			},
			メソッド: {
				getInfo1: 関数(){
					console.log("メソッド");
					"名前: " + this.name + "仕事: " + this.job; を返します。
				}
			},
			計算: {
				getInfo2: 関数(){
					console.log("計算済み");
					"名前: " + this.name + "仕事: " + this.job; を返します。
				}
			}
		})
	</スクリプト>
</html>

図

結論は

両方の方法と計算は、私たちの機能を実現できるようです
計算されたプロパティはキャッシュされます。複数回使用された場合、計算されたプロパティは 1 回だけ呼び出されます。

監視プロパティ

概要

ウォッチを使用して、指定されたデータの変更を監視し、対応するロジックを呼び出してデータを処理することができます。

コード

<!DOCTYPE html>
<html>
	<ヘッド>
		<メタ文字セット="utf-8">
		<タイトル></タイトル>
	</head>
	<本文>
		<div id="アプリ">
			<input type="text" v-model="firstName" />
			<input type="text" v-model="姓" />
			<input type="text" v-model="fullName" />
		</div>
	</本文>
	<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		constアプリ = 新しいVue({
			el: "#app",
			データ： {
				ファーストネーム: "A",
				姓: "B",
				フルネーム: "AB"
			},
			// 監視プロパティ watch: {
				firstName(値) {
					this.fullName = 値 + this.lastName
				},
				lastName(値) {
					this.fullName = this.firstName + 値
				}
			}
		})
	</スクリプト>
</html>

要約する

監視プロパティには、計算プロパティよりもはるかに多くのコードが必要です。計算プロパティではデータの計算のみが必要ですが、監視プロパティでは各データの変更を監視する必要があります。

Vue ライフサイクル

次の図はインスタンスのライフサイクルを示しています。すぐにすべてを理解する必要はありませんが、学び続けて使用していくうちに、その参考価値はどんどん高まっていきます。

ライフサイクルは、初期化段階、更新段階、および終了段階の3つの段階に大別されます。

初期化フェーズ

このフェーズは、新しい Vue インスタンスが作成された場合に 1 回だけ呼び出されます。

beforeCreate: 作成前に関数を呼び出す

created: 作成後に関数を呼び出す

次にテンプレートをマウントしてレンダリングします

beforeMount: マウント前の操作。elで選択されたラベルを置き換える。

マウント完了: マウントが完了し、ブラウザにデータが表示されます

更新フェーズ

このフェーズはデータが変更されたときに開始され、

beforeUpdate: データが変更されたときにトリガーされます

更新: 仮想DOMが変更された後、つまりデータが変更された後に呼び出されます

死の段階

デスフェーズも一度だけ呼び出されます

beforeDestroy: 破壊前

破壊された：破壊された

サンプルコードは次のとおりです

<!DOCTYPE html>
<html>
	<ヘッド>
		<メタ文字セット="utf-8">
		<タイトル></タイトル>
		
	</head>
	<本文>
		<div id="アプリ">
			<p v-show="isShow">{{メッセージ}}</p>
			<p>{{isShow} </p>
			<button type="button" @click="destroyVM">いじめをキャンセル</button>
		</div>
	</本文>
	<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		constアプリ = 新しいVue({
			el: "#app",
			データ： {
				メッセージ: 「迫り来る」、
				isShow: 真
			},
			
			作成前() {
				console.log("作成前");
			},
			
			作成された() {
				console.log("作成");
			},
			
			マウント前() {
				console.log("マウント前");
			},
			
			マウント() {
				console.log("マウントされました");
				// タイマーを作成する this.intervald = setInterval(()=>{
					console.log("-------"+this.isShow);
					this.isShow = !this.isShow;
				},1000)
			},
			
			更新前() {
				console.log("beforeUpdate");
			},
			
			更新された() {
				console.log("更新されました");
			},
			
			破棄する前に() {
				console.log("beforeDestroy");
                // タイマーをクリアする clearInterval(this.intervald)
			},
			
			破壊された() {
				console.log("破棄されました");
			},
			
			メソッド: {
				// VM を強制終了する
				VMを破棄する（）{
					//破棄関数 this.$destroy() を呼び出す
				}
			}
		})
	</スクリプト>
</html>

下図のように、ページが更新されると、beforeCreate、created、beforeMount、mounted が順に呼び出されます。isShow データを変更するためにタイマーが実行されるときに、beforeUpdate と updated が複数回呼び出されます。ボタンをクリックすると、ログアウト関数が呼び出され、beforeDestroy と destroy が呼び出されます。

一般的には、created、mounted、beforeDestroy がよく使用されます。

作成、マウント: Ajax リクエストの送信、タイマーの開始、その他の非同期タスク
beforeDestroy: タイマーをクリアするなどの仕上げ作業を行う

要約する

これで、Vue.js の計算プロパティ、監視プロパティ、ライフサイクルに関するこの記事は終了です。Vue の計算プロパティ、監視プロパティ、ライフサイクルの詳細については、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

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