Vueライフサイクルの違いの詳細な説明

ライフサイクル分類

vue の各コンポーネントは独立しており、各コンポーネントには独自のライフサイクルがあります。

コンポーネントの作成、データの初期化、マウント、更新、破棄まで、これがコンポーネントのライフサイクルと呼ばれるものです。
コンポーネント内の具体的なメソッドは次のとおりです。
作成前
作成された
マウント前
マウントされた
更新前
更新されました
破棄前
破壊された

作成前

インスタンスの初期化後、データの監視とイベントの設定前に呼び出されます。この時点では、コンポーネントのオプションオブジェクトは作成されておらず、el とデータは初期化されていないため、メソッドにアクセスできません。
データに関する方法とデータ、計算など。

作成された

これは、インスタンスが作成された後に呼び出されます。このステップでは、インスタンスは、データの監視、プロパティとメソッドの計算、ウォッチ/イベントイベントのコールバック、および完了したデータの初期化などの構成を完了していますが、el はまだ完了していません。ただし、ハング段階はまだ開始されておらず、$elプロパティはまだ表示されていません。これは、メソッド内のメソッドを呼び出し、データ内のデータを変更し、その変更がVueのレスポンシブバインディングを通じてページに反映され、計算されたプロパティがcomputedで取得されるなど、一般的なライフサイクルです。通常、ここでインスタンスを前処理できます。

beforeMount（マウント前）

ハングが始まる前に呼び出され、関連するレンダリング関数が初めて呼び出されます (仮想 DOM)。インスタンスは、テンプレートのコンパイル、データとテンプレート内のデータからの HTML の生成、el とデータの初期化の完了という構成を完了しています。ページへの HTML にはまだハングしていないことに注意してください。

マウントされた

マウントが完了し、テンプレート内の HTML が HTML ページにレンダリングされます。この時点で、通常、いくつかの ajax 操作を実行でき、マウントは 1 回だけ実行されます。

更新前

データが更新される前、仮想 DOM が再レンダリングされてパッチが適用される前に呼び出されます。追加の再レンダリングプロセスをトリガーせずに、このフックで状態をさらに変更できます。

更新されました

このフックは、データの変更により仮想 DOM が再レンダリングされ、パッチが適用された場合にのみ呼び出されます。呼び出されると、コンポーネント DOM が更新されているため、DOM に依存する操作を実行できます。ただし、ほとんどの場合、この期間中に状態を変更すると更新の無限ループが発生する可能性があるため、このフックは避ける必要があります。このフックは、サーバー側レンダリング中には呼び出されません。

破棄前

インスタンスが破棄される前に呼び出されると、インスタンスは引き続き完全に使用可能です。
このステップでは、これを使用してインスタンスを取得することもできます。
通常、このステップでは、コンポーネント内のタイマーをクリアしたり、DOMイベントを監視したりするなどのリセット操作が実行されます。

破壊された

インスタンスが破棄された後に呼び出されます。呼び出し後、すべてのイベントリスナーが削除され、すべての子インスタンスが破棄されます。このフックは、サーバー側のレンダリング中には呼び出されません。
vueインスタンスはイベントリスナーとDOMバインディングを解放しましたが、DOM構造はまだ存在しています