目次
序文
私も知らず知らずのうちに Vue に長く触れてきて、ライフサイクル機能についての理解も深まり、いつ、どこで、どのように使うのかもある程度理解できました。私のライフサイクルの理解を共有します。
ライフサイクルとは何ですか?
簡単に言うと、Vue のすべてのコンポーネントにはライフサイクルがあり、コンポーネントの作成からコンポーネントの破棄まで、多くの段階があり、各段階のタスクが異なり、トリガーされるタイミングも異なります。ライフサイクルをより良く使用するには、ライフサイクルを深く理解する必要があり、ライフサイクル機能を使用すると、開発の半分の労力で 2 倍の結果を得ることができます。
次に、ライフサイクルの流れ、各ステージで Vue 内で何が行われているか、ライフサイクル機能の詳しい説明、各ステージに適した操作など、まずは公式 Web サイトのドキュメントの観点から分析していきます。
ここではまず、公式ドキュメントのライフサイクルの説明を確認します。
各 Vue コンポーネント インスタンスは、作成時に、データ リスナーの設定、テンプレートのコンパイル、DOM へのインスタンスのマウント、データ変更時の DOM の更新など、一連の初期化手順を実行する必要があります。その過程で、ライフサイクル フックとして知られる関数も実行され、開発者が特定の段階で独自のコードを実行する機会が得られます。
ライフサイクルプロセス
コンポーネントの作成
コンポーネントの作成new Vue. newVue の初期化では、Vue によってさまざまなコンポーネントが初期化されますが、
この部分の内容は最初は説明しませんので、後で特別な記事を書いて詳しく説明します。
初期化イベントとライフサイクル
Init Events & Lifecycleこの段階では、イベントとライフサイクルが初期化され、プロップ、データ、メソッドなどのコンポーネントはまだ作成されていないため、すべて使用できない状態になります。
beforeCreateここでは、出力がthis.IDであることが明確にわかりますundefined。
初期化モジュール
初期化モジュール
Init injections & reactivityこのフェーズでは、すべてのコンポーネントが初期化されます
この段階ではコンポーネントが作成され、使用できる状態になりますが、コンポーネントのテンプレート構造はまだ生成されていません。
ここでは、data 内のデータは取得できるが、DOM 構造が作成されていないため取得できないことが明確にわかります。
描画構造のデータとテンプレートの判断
この段階で存在するかどうかを判断し、存在しない場合は mount(el) メソッド
elを呼び出します( mount(el) メソッド(mount ( e l )メソッド (この mount メソッドは拡張機能をマウントするために使用されます)が存在する場合、テンプレートのチェックが続行され、
この時点で DOM 情報を取得できます。
HTML構造を生成する
この段階では、前のステップで生成されたデータとテンプレートがコンパイルされ、HTML 構造がコンパイルされてメモリに生成されます。現在の DOM 構造はまだ生成されていないことに注意してください。
HTML構造をレンダリングする
el 属性で指定された DOM 要素を、メモリ内でコンパイルおよび生成された HTML 構造に置き換えます。この段階の後、現在のコンポーネントの DOM 構造はすでに組み込まれています。
データ更新
この段階では、ページ内のデータの変更に応じて繰り返し実行され、最新のデータに応じてコンポーネントの DOM 構造が再描画されます。
コンポーネントの初期破壊
コンポーネントが破棄されようとしているとき、コンポーネントが破棄されようとしているとき、この段階ではコンポーネントはまだ通常の動作状態にあり、完全には破棄されていません。この段階では、データ リスナー、サブコンポーネント、およびイベント リスナーが先に破壊されるだろう
コンポーネントを破壊する
この段階に到達すると、コンポーネントが破棄され、ブラウザ内のこのコンポーネントに対応する DOM フックが完全に削除されたことを意味します。
ライフサイクル機能
| 関数名 | ステージ |
|---|---|
| 作成前 | 作成前 |
| 作成した | 作成後 |
| マウント前 | マウント前 |
| 取り付けられた | マウント後 |
| 更新前 | アップデート前 |
| 更新しました | 更新しました |
| 前に破壊する | 破壊の前に |
| 破壊されました | 破壊後 |
作成前
作成前: この段階では、コンポーネントのプロパティ、データ、およびメソッドはまだ作成されておらず、それらはすべて使用できない状態にあります。この段階は主に、それに依存する必要のないコンポーネントに対する操作に適してい
ます
。ログインなどの状況がある場合は、この機能を使用できます。
作成した
作成後: コンポーネントのプロパティ、データ、およびメソッドは作成され、使用可能ですが、コンポーネントのテンプレート構造はまだ生成されていません。
この機能を利用して、この関数で Ajax リクエストを開始するのが最善です。ここにはすでにデータがあり、これが Ajax リクエストを開始する最も速い場所であり、Ajax はできるだけ早くリクエストを開始する必要があるためです。したがって、ここが Ajax リクエストを行うのに最適な場所です。
マウント前
マウント前: メモリ内でコンパイルされた HTML 構造がブラウザにレンダリングされます。現時点では、ブラウザには現在のコンポーネントの DOM 構造がありません。
この段階では実用的なアプリケーションは比較的少なく、beforeMount 段階は過渡的なものであり、通常はほとんど使用されません。
取り付けられた
マウント後: この段階では、メモリ内の HTML 構造がブラウザに正常にレンダリングされています。この時点で、ブラウザには現在のコンポーネントの DOM 構造がすでに含まれています。
このステージでは、データに基づいた例外の表示、データのレンダリングなど、DOM 構造を操作する方法を使用するのが最も適しています。このステージは最も一般的に使用されるステージであり、データ レンダリングのほとんどの操作は次のとおりです。ここで完成しました。
更新前
更新前: 変更後の最新データに合わせてコンポーネントのテンプレート構造を再描画する必要がある｡
データの監視や運用データの変更など､データ更新前の作業に適している｡ただしDOMは信頼できない｡この段階ではon コンポーネントは動作しており、この時点でDOMの値は変化していますが、取得したDOMはまだ更新された状態です。
更新しました
更新後: 最新のデータに基づいてコンポーネントの DOM 構造の再描画が完了しています。
この段階では、すでに DOM の最新の状態を取得できます。データの更新後に適切な操作が実行されます。ここでデバイスを削除し、データの更新が完了した後の最新の DOM に対する一連の論理操作を使用できます。
前に破壊する
破棄前: このコンポーネントは破棄されます。この時点ではまだ破棄されておらず、コンポーネントはまだ通常の動作状態にあります。
この段階は、破棄前の一連の操作に適しています。たとえば、破棄が確認された場合、または破棄する前に他の DOM データを操作する必要がある場合は、ここに一定の時間を追加できます。
破壊されました
破壊後: コンポーネントは破壊され、ブラウザ内のこのコンポーネントに対応する DOM 構造は完全に削除されています。
呼び出し後、すべてのイベント リスナーが削除され、すべての子インスタンスが破棄されます。このフックは、サーバー側のレンダリング中には呼び出されません。