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はカバーインデックスを使用してテーブルリターンを回避し、クエリを最適化します。

推薦する

SeataがMySQL 8バージョンを使用できない問題を解決する方法

考えられる理由: Seata が MySQL 8 をサポートしない主な理由は、接続ドライバーがバージ...

Dockerコンテナ間の通信を実装する方法

シナリオ: laradock 開発環境 (php7.3+mysql5.7) がローカルに構築されてい...

MySQL データ分析ストレージエンジンの例の説明

目次1. 事例紹介2. システムのデフォルトのストレージエンジンとデフォルトの文字セットを表示する3...

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

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

Dockerイメージ内のファイルを表示する方法

Dockerイメージ内のファイルを表示する方法1. すでに実行中の場合すでに実行中のイメージについて...

純粋な JS を使用して vue.js で双方向バインディング機能を実装する方法

目次まず、双方向バインディングを実装するアイデアについて説明します。これらの機能を実装するための j...

JavaScriptはeコマースプラットフォームの製品詳細を実装します

この記事では、電子商取引プラットフォームで商品の詳細を表示する一般的な例を紹介します。たとえば、ある...

ローカルのMySQLをサーバーデータベースに移行する方法

Linux の scp コマンド (Windows では scp は使用できません) と、mysql...

Vue における LocalStorage と SessionStorage の違いと使い方

目次LocalStorageとはSessionStorageとはLocalStorage と Ses...

nginx 設定ファイルパスとリソースファイルパスを表示する方法

nginx 設定ファイルのパスを表示する nginx -t 経由nginx -t コマンドの本来の機...

雨滴効果を実現する JavaScript キャンバス

この記事では、雨滴効果を実現するためのJavaScriptキャンバスの具体的なコードを参考までに紹介...

HTML における Div と table の違い (あらゆる側面から詳細に説明)

1: 速度と読み込み方法の違いdivとtableの違いは速度ではなく、読み込み方法です。速度はネット...

MySQLは外部SQLスクリプトファイルのコマンドを実行します

目次1. SQLコマンドを含むSQLスクリプトファイルを作成する2. SQLスクリプトファイルを実行...

type=fileファイル変更フォームの名前が正常にエコーされない問題を解決

easyui フレームワークのコードは次のとおりです。 css: .ファイルボックス{ フロート:...

WeChatアプレットは写真アップロード機能を実現

この記事の例では、WeChatアプレットで写真をアップロードするための具体的なコードを参考までに共有...