Vue コンポーネントのライフサイクルとフック機能

コンポーネントのライフサイクル

コンポーネント (コンポーネントは再利用可能な Vue インスタンスです) の作成から破棄までのプロセスは、コンポーネントのライフサイクルであり、期間です。

コンポーネントライフサイクルフック機能

(vue3 と vue2 のライフサイクルフック機能は若干異なります。この記事では vue2 に焦点を当てています)

VUE が提供するライフサイクルフック機能は、コンポーネントのライフサイクルに沿って順番に自動的に実行されるため、ユーザーはさまざまな段階で独自のコードを追加することができます。ライフサイクルフックのthisコンテキストはそれを呼び出した Vue インスタンスを指します。

ライフサイクル図

ここに画像の説明を挿入

フェーズフック関数の作成

beforeCreate()

コンポーネントインスタンスが初期化された直後に呼び出されます。

現時点では、空の vue インスタンスオブジェクトが初期化されたばかりです。オブジェクトには、いくつかのデフォルトのライフサイクル関数とデフォルトイベントしかありません。小道具、データ、およびメソッドは初期化されておらず、使用できない状態にあります。
作成した（）

コンポーネントインスタンスがすべての状態関連オプションを処理した後に呼び出されます。

コンポーネントの props、method、および data は作成済みで使用できますが、コンポーネントのテンプレート構造は生成されておらず、DOM を操作することはできません. Ajax リクエストを開始できる最初のノードです.
beforeMount()

コンポーネントがマウントされる前に呼び出されます。

メモリにコンパイルされた HTML 構造は、ブラウザにレンダリングする準備ができています. この時点では、ブラウザには現在のコンポーネントの DOM 構造がなく、DOM を操作することはできません.
マウントされた()

コンポーネントがマウントされた後に呼び出されます。

作成された HTML 構造は、現在のコンポーネントの DOM 構造と、DOM 操作を実行できる最も古いノードを含めて、ブラウザーにレンダリングされています。

ランタイムフック関数

beforeUpdate()

コンポーネントがリアクティブ状態の変更により DOM ツリーを更新しようとする直前に呼び出されます。

この時点で、ページに表示されているデータはまだ古いものですが、データ内のデータは最新のものであり、ページは更新されていません。ここで、 data 内の最新のデータに基づいて、新しい仮想 DOM ツリーがメモリ上に再レンダリングされます. 仮想 DOM ツリーが更新されると、最新の仮想 DOM がページにレンダリングされます. モデル => ビューから更新を完了します。
更新しました（）

コンポーネントがリアクティブ状態の変更により DOM ツリーを更新した後に呼び出されます。

この時点で、ページとデータデータは同期が保たれ、最新の状態になっています。

破壊相フック機能

beforeDestroy()

コンポーネントが破棄される前に呼び出されます。

現時点では、データとすべてのメソッド、およびフィルターと命令はまだ利用可能であり、実際の破壊はありません。
破壊されました（）

コンポーネントが破棄された後に呼び出されます。

フックが呼び出された後、Vue インスタンスに対応するすべての命令がバインド解除され、すべてのイベントリスナーが削除され、すべてのサブインスタンスも破棄されます。