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 によって制御されなくなることがわかります。

ここに画像の説明を挿入