Vueライフサイクルフック機能

ライフサイクル

Vueインスタンスまたはコンポーネントの作成から破棄までの一連のプロセス（コンポーネントは本質的には事前定義されたオプションを持つインスタンスです）はライフサイクルと呼ばれます。

ライフサイクルフック機能

ライフサイクルのさまざまな段階で自動的に実行される関数は、ライフサイクルではフック関数と呼ばれます

ライフサイクルの3つの主要な段階とそのフック機能

1. 初期マウントフェーズ
   1. beforeCreate
   2. 作成した
   3. beforeMount
   4. マウントされた
2. 更新ステージ
   1. beforeUpdate
   2. 更新しました
3. 破壊フェーズ
   1. beforeDestroy
   2. 破壊されました

beforeCreate

インスタンスが作成される前

1. ライフサイクル中に一度だけトリガーされます
2. マウントポイント要素とデータデータを取得できません
3. 通常、影響はありませんが、ajaxは非同期操作であるため、バーに移動する必要がある場合はajaxを送信することもできます。非同期完了の場合、ライフサイクルは次のステージに入り（マウントが完了する）、次のステージで変更できます。データ内のデータ。

作成した

インスタンスが作成されます

1. ライフサイクル中に一度だけトリガーされます
2. データオプションでデータを取得し、メソッドオプションで関数を呼び出すことができます。
3. マウントポイント要素を取得できません
4. 通常、ページを開いたときに必要なデータを取得するには、ここにajaxリクエストを送信します

beforeMount

インスタンスがマウントされる前：関連するレンダリング関数が初めて呼び出されます。

マウントとは、vueがテンプレートデータの解析を完了し、実際のDOMに置き換えることです。

1. ライフサイクル中に一度だけトリガーされます
2. 実際のDOMはvm $ Elから取得できません
3. 通常は何の効果もありませんので、操作する必要はありません。

マウントされた

インスタンスがマウントされている

1. ライフサイクル中に一度だけトリガーされます
2. 実際のDOMを取得できます
3. 初期化DOM関連の操作をここに配置できます。たとえば、Swiperのインスタンス化。

beforeUpdate

インスタンス更新前

1. ライフサイクル中に、複数回トリガーされる可能性があります
2. データ更新前にDOMを取得できますが、データ更新後にDOMを取得できません
3. 通常、ここでデータを変更しないでください。また、非同期リクエストを送信しないでください。無限ループに入ります。
4. 通常は何の効果もありませんので、操作する必要はありません。

更新しました

インスタンスの更新が完了しました

1. ライフサイクル中に、複数回トリガーされる場合があります。
2. データ更新後にDOMを取得できます。
3. 通常、ここでデータを変更しないでください。また、非同期リクエストを送信しないでください。無限ループに入ります。
4. 一般に、Swiper更新など、実際のDOM更新後の操作に使用されます。

beforeDestroy

インスタンスが破棄される前

1. タイマーのクリア、グローバルイベントバインディングの破棄など、破棄を行います。

破壊されました

インスタンスは破棄されます

1. この時点では、domシェルのみが残されていました。コンポーネントが分解され、データバインディングが削除され、監視が削除され、子インスタンスが破棄されました。
2. 通常は何の効果もありませんので、操作する必要はありません。