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

Vue インスタンスには完全なライフサイクルがあります。つまり、作成の開始からデータの初期化、テンプレートのコンパイル、DOM でのハング、レンダリング、更新、レンダリング、アンロードなどの一連のプロセスが存在します。 Vue インスタンスのライフサイクル、フックは特定の段階にあります。この段階では、何らかの処理を実行する機会が与えられます。

1. ライフサイクルの導出

1. 名前: ライフサイクルコールバック関数、ライフサイクル関数、ライフサイクルフック。

2. それは何ですか: 重要な瞬間に Vue が呼び出す特別な名前を持ついくつかの関数。

3. ライフサイクル関数の名前は変更できませんが、関数の具体的な内容は要件に応じてプログラマによって記述されます。

4. ライフサイクル関数のこのポイントは、vm またはコンポーネントインスタンスオブジェクトです。

2. 分析ライフサイクル

(1) beforeCreate（作成前）

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

(2)作成済み（作成後）

インスタンスが作成された後に呼び出されます。このステップでは、インスタンスは次の構成を完了しています: データの観察、属性とメソッドの操作、監視/イベントのイベントコールバック、およびデータデータの初期化ですが、el はまだ完了していません。ただし、ハングステージはまだ開始されておらず、$el 属性は現在非表示になっています。メソッド内でメソッドを呼び出し、データ内のデータを変更でき、変更は Vue の応答を通じて反映できるため、これは一般的なライフサイクルです。ページ上で、computed などで計算されたプロパティを取得します。通常はここでインスタンスを前処理できますが、子供向けの靴の中には、ここで ajax リクエストを送信することを好む人もいます。このサイクルでインスタンスを処理する方法がないことは注目に値します。変換プロセスがインターセプトされるため、ページに入る前に何らかのデータを取得する必要がある場合、このメソッドでリクエストを送信するのは適切ではありません。RouteEnter の前にコンポーネントのルーティングフックでリクエストを完了することをお勧めします。

（3）マウント前

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

（4）装着済み

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

（5）アップデート前

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

(6)更新（更新）

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

(7) beforeDestroy(破壊前)

インスタンスが破棄される前に呼び出されると、インスタンスはまだ完全に利用可能です。

このステップでは、これを使用してインスタンスを取得することもできます。
一般に、コンポーネント内のタイマーやリッスンされる dom イベントのクリアなど、いくつかのリセット操作がこのステップで実行されます。

(8) 破壊（破壊後）

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

3. ライフサイクルを要約する

一般的に使用されるライフサイクルフック:
	1.mounted: ajax リクエストの送信、タイマーの開始、カスタムイベントのバインド、メッセージのサブスクライブなど [初期化操作]。
	2.beforeDestroy: タイマーのクリア、カスタムイベントのバインド解除、メッセージの購読解除など [仕上げ作業]。
Vue インスタンスの破棄について
	1. 破壊後は、Vue 開発者ツールを使用しても情報が表示されなくなります。
	2. カスタムイベントは破棄後は無効になりますが、ネイティブ DOM イベントは引き続き有効です。
	3. 通常、beforeDestroy ではデータは操作されません。データが操作された場合でも、更新プロセスが再度トリガーされることはないためです。

高品質な説明: Vue ライフサイクルの詳細な説明 - Xiao Wu 3 - 博客园