Vue ライフサイクルの紹介とフック関数の詳細な説明

Vue ライフサイクルの紹介とフック関数の詳細な説明

Vueライフサイクルの紹介とフック機能

コンポーネントの内部構造はフェーズごとに異なるため、通常はマウント フェーズでの Ajax データ取得など、特定のフックが特定の処理を実行します。 Vue インスタンスの作成からインスタンスの最終的な破棄までのプロセス全体を VUE ライフサイクルと呼びます。このライフサイクルでは、Vue インスタンスの作成から始まり、まず Vue インスタンスが作成され、次にデータが初期化され、テンプレートがコンパイルされ、DOM がマウントされ、DOM がレンダリングされ、オブジェクトのプロパティが更新され、DOM がレンダリングされ、バインディングが解除されて破棄されます。

VUEライフサイクルフック

ライフサイクル フックは、ライフサイクル時間、ライフサイクル関数とも呼ばれ、ライフサイクル フックは、vue ライフサイクルでトリガーされるさまざまなイベントです。これらのイベントはライフサイクル フックと呼ばれます。vue ライフサイクルでは、そのほとんどは作成、ハング、更新、破棄の 4 つのステージに分かれています。これらの 4 つのステージはそれぞれ 2 つのライフサイクル フックに対応しています。

1. 作成部分 (create) は、Vue インスタンスが初期化されるときです。簡単に言うと、この操作をコード var app = new Vue() で実行し、Vue ライフサイクルの作成フェーズに入ります。作成フェーズでは、beforeCreate と created という 2 つのプログラミング インターフェイスが提供されます。 両方のインターフェースは作成フェーズでトリガーされますが、2 つのインターフェースにはいくつかの違いがあります。beforeCreate は created よりも前にトリガーされます。つまり、vue インスタンスが初期化された後、データが読み取られる前にトリガーされます。この時点で data 内のデータが読み取られると、unfined がプロンプトされます。 created はインスタンスが作成された後に呼び出されます。この時点では、data 内のデータは書き込まれていますが、DOM はまだマウントされていないため、ページに関連付けられていません。ここでマウント段階に入ります。

2. マウントフェーズ (マウント):このフェーズでは、ページ内の DOM をインスタンス化された Vue オブジェクトにマウントします。簡単に言うと、el: '#dom' が実行されます。この段階では、beforemount と mount という 2 つのインターフェースもプログラムする必要があります。これら 2 つのインターフェースの主な違いは、DOM がインスタンス オブジェクトにマウントされるかどうかです。Beforemount はマウント前にトリガーされ、テンプレートのみが解析されます。このとき、マウントする必要がある DOM の innerHTML が出力されている場合は、データをレンダリングせずにテンプレートをそのまま出力します。マウント後、データ内のデータをページ上にレンダリングできるようになります。このフェーズの後に更新フェーズが続きます。

3. 更新フェーズ:このフェーズでは、ページ上のデータが最初の読み込み後に再度更新されます。また、beforeupdate と update の 2 つのインターフェースにも対応しています。これら 2 つのインターフェースの主な違いは、ページ DOM がレンダリングされるかどうかにあります。 data 内のデータを変更し、変更が完了した後に beforeupdate をトリガーすると、data 内の属性値は変更されていますが、ページの DOM はレンダリングされていません。更新はページ上のデータをレンダリングすることです。この時点で、Vue のライフサイクルは更新段階に達しています。通常の使用では、何度も更新段階に入り、ページ上のデータにさまざまな変更を加えることがよくあります。ただし、不要なイベントを閉じてメモリを解放するには、破棄フェーズが必要です。
4 番目は、破棄フェーズ (destory) です。インスタンスが破棄されると、そのインスタンスにバインドされているすべてのイベントが無効になり、リスナーが削除されます。このフェーズは、beforeDestroy と destroy の 2 つのインターフェースに対応します。 deforeDestory は、インスタンスを破棄する必要があるがまだ呼び出されていないときに呼び出されます。この時点では、インスタンスにバインドされているさまざまなイベントとリスナーはまだ利用可能です。 destroy はインスタンスが破棄された後に呼び出されます。この時点ではインスタンス内のすべてのものは使用できませんが、ページ上のデータはページの最後のレンダリングのデータが保持されたままです。

Vue ライフサイクルの紹介

ここに画像の説明を挿入

ここに画像の説明を挿入

上記の段階

コード監視フック機能の使用

<!DOCTYPE html>
<html>
<ヘッド>
    <タイトル></タイトル>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/vue/2.1.3/vue.js"></script>
</head>
<本文>
 <div id="アプリ">
     <p>{{ メッセージ }}</p>
</div>
 <script type="text/javascript">
   var アプリ = 新しい Vue({
      el: '#app',
      データ: {
          メッセージ: 「xuxiao は男の子です」 
      },
       beforeCreate: 関数() {
                console.group('beforeCreate 作成前のステータス ================》');
               console.log("%c%s", "color:red" , "el : " + this.$el); //未定義
               console.log("%c%s", "color:red","data : " + this.$data); //未定義 
               console.log("%c%s", "color:red","メッセージ: " + this.message)  
        },
        作成: 関数 () {
            console.group('created 作成完了ステータス ================》');
            console.log("%c%s", "color:red","el : " + this.$el); //未定義
               console.log("%c%s", "color:red","data : " + this.$data); //初期化されましたconsole.log("%c%s", "color:red","message: " + this.message); //初期化されました},
        beforeMount: 関数() {
            console.group('beforeMount マウント前のステータス ===============》');
            console.log("%c%s", "color:red","el : " + (this.$el)); //初期化済み console.log(this.$el);
               console.log("%c%s", "color:red","data : " + this.$data); //初期化されましたconsole.log("%c%s", "color:red","message: " + this.message); //初期化されました},
        マウント: 関数 () {
            console.group('mounted マウント終了ステータス ================》');
            console.log("%c%s", "color:red","el : " + this.$el); //初期化済み console.log(this.$el);    
               console.log("%c%s", "color:red","data : " + this.$data); //初期化されましたconsole.log("%c%s", "color:red","message: " + this.message); //初期化されました},
        beforeUpdate: 関数 () {
            console.group('beforeUpdate 更新前のステータス ===============》');
            console.log("%c%s", "color:red","el : " + this.$el);
            console.log(this.$el);   
               console.log("%c%s", "color:red","データ: " + this.$data); 
               console.log("%c%s", "color:red","メッセージ: " + this.message); 
        },
        更新: 関数 () {
            console.group('更新されました 更新完了ステータス ================》');
            console.log("%c%s", "color:red","el : " + this.$el);
            console.log(this.$el); 
               console.log("%c%s", "color:red","データ: " + this.$data); 
               console.log("%c%s", "color:red","メッセージ: " + this.message); 
        },
        beforeDestroy: 関数 () {
            console.group('beforeDestroy 破棄前の状態 ================》');
            console.log("%c%s", "color:red","el : " + this.$el);
            console.log(this.$el);    
               console.log("%c%s", "color:red","データ: " + this.$data); 
               console.log("%c%s", "color:red","メッセージ: " + this.message); 
        },
        破棄: 関数 () {
            console.group('destroyed 破壊完了ステータス ================》');
            console.log("%c%s", "color:red","el : " + this.$el);
            console.log(this.$el);  
               console.log("%c%s", "color:red","データ: " + this.$data); 
               console.log("%c%s", "color:red","メッセージ: " + this.message)
        }
    })
</スクリプト>
</本文>
</html>

作成およびマウント関連

beforecreated: el と data が初期化されていません

created:データデータの初期化が完了しました。elには

beforeMount: el とデータの初期化が完了しました

mounted :マウント完了

さらに、赤い領域では、el がまだ {{message}} であることがわかります。これは、最初にピットを占有する Virtual DOM (仮想 Dom) テクノロジが適用されている場所です。値は後でマウントされたときにレンダリングされます。

ここに画像の説明を挿入

アップデート関連

ここに画像の説明を挿入

破壊する

破壊に関しては、まだよくわかっていません。コンソールでコマンドを実行して、Vue インスタンスを破棄します。破棄が完了したら、メッセージの値を再度変更し、Vue はこのアクションに応答しなくなります。ただし、元々生成された DOM 要素はまだ存在しています。destroy 操作が実行されると、それらは Vue によって制御されなくなることがわかります。

ここに画像の説明を挿入

要約する

beforecreate :例えば、ここに読み込みイベントを追加することができます

created :ここで読み込みが終了し、関数を自動実行できるように初期化が行われます。

mounted :ここでバックエンドリクエストを開始し、データを取得し、ルーティングフックで何かを実行します

beforeDestory: XX を削除してもよろしいですか?削除済み: 現在のコンポーネントが削除され、関連するコンテンツがクリアされました

この記事はこれで終わりです。皆さんのお役に立てれば幸いです。また、123WORDPRESS.COM のその他のコンテンツにも注目していただければ幸いです。

以下もご興味があるかもしれません:
  • Vue のライフサイクルとフック関数
  • Vue3ライフサイクルフック機能の詳しい説明
  • Vue ライフサイクルにはいくつのステージがありますか?違いは何ですか?
  • Vueライフサイクルフック関数とそれがいつトリガーされるかについて話しましょう

<<:  初心者がHTMLタグを学ぶ(1)

>>:  MySQLはカバーインデックスを使用してテーブルリターンを回避し、クエリを最適化します。

推薦する

MySQL のインストール方法と設定に関するいくつかの問題の概要

1. MySQL rpm パッケージのインストール # インストールソースをダウンロードします [r...

HTML 選択オプション デフォルトの選択方法

オプションに属性 selected = "selected" を追加すると、それ...

MySQLトリガーの簡単な使用例

この記事では、例を使用して MySQL トリガーの簡単な使用方法を説明します。ご参考までに、詳細は以...

プライベートDockerリポジトリであるHarborをインストールするための詳細な手順

Harborのインストールは非常に簡単ですが、Dockerログインで行き詰まってしまいました。このブ...

MySQL トリガー構文とアプリケーション例

この記事では、例を使用して MySQL トリガーの構文とアプリケーションを説明します。ご参考までに、...

ファイアウォールルールの設定とコマンド(ホワイトリスト設定)の詳しい説明

1. ファイアウォールルールを設定する例1: ポート8080を外部に公開する ファイアウォールコマン...

MySQL を暗号化および復号化するいくつかの方法 (要約)

目次前面に書かれた双方向暗号化エンコード/デコードAES_ENCRYPT/AES_DECRYPT D...

新しい要素を作成する3つの方法のまとめ

1つ目: テキスト/HTML経由var txt1="<h1>テキスト。<...

Centos7 サーバーで jar パッケージ プロジェクトを開始する最良の方法

序文Linux 上で jar パッケージを実行する方法は誰もが知っています。なぜ別々に話したいのでし...

docker を使用して Redis マスター/スレーブを構築する方法

1. Docker環境を構築する1. Dockerfileを作成する Centos:latest か...

CSS scroll-snap スクロールイベント停止と要素位置検出の実装

1. スクロールスナップはフロントエンド開発者にとって必須のスキルですCSS スクロール スナップは...

JavaScript 状態コンテナ Redux の詳細な説明

目次1. Reduxを選ぶ理由2. Reduxデータフロー3つの原則4. Reduxソースコード分析...

React Fragment の紹介と詳しい使い方

目次序文フラグメントの動機React Fragment の紹介と使用<React.Fragme...

MySQLでデータを削除してもディスク領域が解放されないのはなぜですか

目次問題の説明解決問題分析問題の説明MySQL で delete ステートメントを使用してデータを削...

MySQLの複合インデックス方式の詳細な説明

どの DBMS でも、インデックスは最適化にとって最も重要な要素です。データ量が少ない場合、適切なイ...