Vue のライフサイクルとフック関数の詳細な説明と典型的な面接の質問

1. Vue ライフサイクル

コンポーネントの作成から破棄までのプロセス全体がライフサイクルです。

Vue インスタンスの作成から破棄までのプロセスがライフサイクルです。つまり、作成からデータの初期化、テンプレートのコンパイル、Dom のマウント→レンダリング、更新→レンダリング、アンインストールなどの一連の処理を Vue のライフサイクルと呼びます。

2. フック機能

Vueフレームワークには、コンポーネントのライフサイクル フェーズの進行に応じて特定の時間に自動的に実行され、特定の操作を実行する組み込み関数があります。

2.1 4つの段階と8つの方法に分かれています。

次の図はインスタンスのライフサイクルを示しています。

2.2 初期化フェーズ

1.new Vue() – Vue のインスタンス化 (コンポーネントも小さな Vue インスタンスです)

2. 初期化イベントとライフサイクル – 初期化イベントとライフサイクル関数

3.beforeCreate – ライフサイクルフック関数が実行される

4.Initインジェクションとリアクティブ – Vue内にデータとメソッドを追加する

5.created – ライフサイクルフック関数が実行され、インスタンスが作成される

6. 次はテンプレートコンパイルフェーズです – 分析を開始します

7.エルオプションはありますか？ – エルオプションはありますか？ – どこに掛けるか確認してください

いいえ。$mount() メソッドを呼び出します。

はい、テンプレートオプションの確認を続けます

<スクリプト>
エクスポートデフォルト{
    データ（）{
        戻る {
            メッセージ: 「こんにちは、Vue」
        }
    },
    // 1. 初期化 // new Vue() の後、vue はインスタンス オブジェクトにいくつかのプロパティとメソッドを追加します。データとメソッドは「前」に初期化されます。
    作成前(){
        console.log("beforeCreate -- 実行");
        console.log(this.msg); // 未定義
    },
    // データとメソッドが初期化された後 // シナリオ: ネットワーク要求、グローバルイベントを登録 created(){
        console.log("作成 -- 実行されました");
        console.log(this.msg); // こんにちは、Vue
 
        this.timer = setInterval(() => {
            console.log("ハハハ");
        }, 1000)
    }
}
</スクリプト>

2.3 マウントフェーズ

1. テンプレートオプションのチェック

はい - テンプレートをコンパイルし、レンダリング関数を返します

なし – el オプションに対応するタグをテンプレートとしてコンパイルします (レンダリングするテンプレート)

2. 仮想DOMが実際のDOMとしてマウントされる前

3. beforeMount – ライフサイクルフック関数が実行される

4.作成… – 仮想DOMとレンダリングされたデータを実際のDOMにアタッチします

5. 実際のDOMがマウントされる

6.mounted – ライフサイクルフック関数が実行される

<テンプレート>
  <div>
      <p>学習ライフサイクル - コンソール印刷を参照</p>
      <p id="myP">{{ メッセージ }}</p>
  </div>
</テンプレート>
 
<スクリプト>
エクスポートデフォルト{
    // ...他のコードは省略// 2. マウント// 実際の DOM マウントの前// シナリオ: データを前処理し、更新されたフック関数をトリガーしません beforeMount(){
        console.log("beforeMount -- 実行");
        console.log(document.getElementById("myP")); // null
 
        this.msg = "再評価"
    },
    // 実際のDOMがマウントされた後 // シナリオ: マウント後の実際のDOM
    マウントされた(){
        console.log("マウントされました -- 実行されました");
        console.log(document.getElementById("myP")); // p
    }
}
</スクリプト>

2.4 更新フェーズ

1. データ内のデータが変更された場合、DOMを更新する前に

2.beforeUpdate – ライフサイクルフック関数が実行される

3. 仮想DOM… – 仮想DOMの再レンダリング、実際のDOMへのパッチ適用

4.更新 – ライフサイクルフック関数が実行される

5. データが変更されたらサイクルを繰り返す

<テンプレート>
  <div>
      <p>学習ライフサイクル - コンソール印刷を参照</p>
      <p id="myP">{{ メッセージ }}</p>
      <ul id="myUL">
          <li v-for="(val, index) in arr" :key="index">
              {{ val }}
          </li>
      </ul>
      <button @click="arr.push(1000)">値を追加するには最後をクリックします</button>
  </div>
</テンプレート>
 
<スクリプト>
エクスポートデフォルト{
    データ（）{
        戻る {
            メッセージ: 「こんにちは、Vue」
            編曲: [5, 8, 2, 1]
        }
    },
  
    // 3. 更新 // 前提条件: データが変更されたときのみ実行 // 更新前 beforeUpdate(){
        console.log("beforeUpdate -- 実行");
        console.log(document.querySelectorAll("#myUL>li")[4]); // 未定義
    },
    // 更新後 // シナリオ: 更新された実際のDOMを取得する
    更新されました(){
        console.log("更新されました -- 実行されました");
        console.log(document.querySelectorAll("#myUL>li")[4]); // li
    }
}
</スクリプト>

2.5 破壊フェーズ

1. $destroy() が呼び出されると、たとえばコンポーネントの DOM が削除されます (例: v-if)

2. beforeDestroy – ライフサイクルフック関数が実行される

3. データモニター、サブコンポーネント、イベントリスナーを分解する

4. インスタンスが破棄された後、フック関数が最終的にトリガーされます

5.destroyed – ライフサイクルフック関数が実行される

<スクリプト>
エクスポートデフォルト{
    // ...その他のコードは省略// 4. 破棄// 前提条件: v-if="false" Vue インスタンスを破棄// シナリオ: グローバル イベントの削除、現在のコンポーネントの削除、タイマー、イベント バスの削除イベント $off メソッド beforeDestroy(){
        // console.log('beforeDestroy -- 実行されました');
        クリア間隔(this.timer)
    },
    破壊された()
        // console.log("破棄されました -- 実行されました");
    }
}
</スクリプト>

やっと：

インタビューの質問:

1.Vue ライフサイクルはいくつのステージで構成されていますか?

(1) 作成前

インスタンスの初期化後、データ オブザーバーとイベント/ウォッチャーの構成の前に呼び出されます。

（２）作成された

インスタンスが作成された直後に呼び出されます。このステップでは、インスタンスはデータ オブザーバー、プロパティとメソッドの操作、およびウォッチ/イベント コールバックの構成を完了しています。ただし、マウント フェーズはまだ開始されておらず、$el プロパティは現在表示されません。

（３）マウント前

マウント開始前に呼び出されます。関連するレンダリング関数が初めて呼び出されます。

（4）マウント

el は新しく作成された vm.$el に置き換えられ、インスタンスにマウントされた後にフックが呼び出されます。ルート インスタンスがドキュメント内要素をマウントする場合、mounted が呼び出されると vm.$el もドキュメント内になります。

(5) 更新前

仮想 DOM にパッチが適用される前に、データが更新されたときに呼び出されます。これは、追加されたイベント リスナーを手動で削除するなど、更新する前に既存の DOM にアクセスする場合に便利です。サーバー側レンダリング中は、最初のレンダリングのみがサーバー上で行われるため、このフックは呼び出されません。

（6）更新

このフックは、データの変更により仮想 DOM が再レンダリングされ、パッチが適用された後に呼び出されます。

（7）活性化

キープアライブ コンポーネントがアクティブ化されたときに呼び出されます。このフックはサーバー側のレンダリング中には呼び出されません。

（8）無効化

キープアライブ コンポーネントが非アクティブ化されたときに呼び出されます。このフックはサーバー側のレンダリング中には呼び出されません。

(9)破壊する前に

インスタンスが破棄される前に呼び出されます。この段階では、インスタンスはまだ完全に使用可能です。このフックはサーバー側のレンダリング中には呼び出されません。

（10）破壊された

Vue インスタンスが破棄された後に呼び出されます。呼び出し後、Vue インスタンスによって指し示されるすべてのものがバインド解除され、すべてのイベント リスナーが削除され、すべての子インスタンスが破棄されます。このフックはサーバー側のレンダリング中には呼び出されません。

(11) errorCaptured (2.5.0 以降で新機能)

子孫コンポーネントからエラーがキャッチされたときに呼び出されます。このフックは、エラー オブジェクト、エラーが発生したコンポーネント インスタンス、およびエラーの発生場所に関する情報を含む文字列の 3 つのパラメータを受け取ります。このフックは false を返すことで、エラーがさらに上方に伝播するのを防ぐことができます。

2. ページが初めて読み込まれたときにどのフック関数がトリガーされますか?

beforeCreate、created、beforeMount、mounted などのフック関数

要約する

Vue ライフサイクルとフック関数に関するこの記事はこれで終わりです。Vue ライフサイクルとフック関数に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。