親コンポーネントと子コンポーネントのライフサイクルトリガーシーケンスとは何ですか？

1.ライフサイクル

1. • beforeCreate：インスタンスが初期化された後、イベント構成の前にデータオブザーバーとイベント/ウォッチャーが呼び出されます
   • 作成した：インスタンスが作成された直後にトリガーされるフック関数。この例では、データオブザーバー、属性とメソッドの計算、ウォッチ/イベントイベントコールバックの構成が完了しています。beforeCreateの後、データ変更の監視を開始します。
   • beforeMount：作成後、テンプレートのコンパイルを開始し、データのデータとvue構文で記述されたテンプレートをhtmlにコンパイルします;コンパイルされたHTMLを対応する位置にマウントし始め、beforeMountフック関数をトリガーし、関連するレンダー関数が初めて呼び出されます
   • マウントされた：ページがマウントされた後、マウントされたフック関数がトリガーされます。このとき、Ajaxリクエストを送信してデータを取得できます。マウントされても、すべてのサブコンポーネントが一緒にマウントされることは保証されません。マウントされるのは、インスタンスのライフ全体で一度だけです。
   • beforeUpdate：データが更新されたときに、仮想DOMにパッチが適用される前に呼び出されます
   • 更新しました：データの変更により、仮想DOMが再レンダリングされ、パッチが適用されます。その後、フックが呼び出されます。updatedは、すべての子コンポーネントが一緒に再描画されることを保証しません。ビュー全体が再描画されるまで待機する場合は、vm。$ nextTick in updatedを使用できます。
   • 活性化：キープアライブコンポーネントがアクティブ化されたときに呼び出されます
   • 非アクティブ化：キープアライブコンポーネントが無効になっているときに呼び出されます
   • beforeDestroy：インスタンスが破棄される前に呼び出されます。このステップでは、インスタンスはまだ完全に利用可能です
   • 破壊されました：フックが呼び出された後、Vueインスタンスに対応するすべての命令がバインド解除され、すべてのイベントリスナーが削除され、すべてのサブインスタンスも破棄されます

自己記述：vueインスタンスが初期化された後、beforeCreateフック関数をトリガーしてから、データ監視とイベント構成を開始します。インスタンスが作成された後、作成されたフック関数がすぐにトリガーされ、この時点でデータ監視、属性、およびメソッドが構成されます。その後、テンプレートがコンパイルされます。 、データのデータとvue構文で記述されたテンプレートをHTMLにコンパイルし、HTMLを対応する位置にマウントし始めるときにbeforeMountフック関数をトリガーし、関連するレンダリング関数が初めて呼び出されます。ページがマウントされると、マウントされたフック関数がトリガーされます;データが更新されると、beforeUpdateフック関数がトリガーされ、仮想DOMが再レンダリングとパッチを開始し、更新後に更新されたフック関数がトリガーされます;インスタンスが破棄される前にbeforeDestroyフック関数がトリガーされ、インスタンスはこの時点でまだ利用可能であり、その後イベントリスナーが削除されます、サブインスタンスの破棄など、完了後、破棄がトリガーされます。

2. 作成済みとマウント済みの違い：参考：Vueライフサイクルでのマウント済みと作成済みの違い

   • created：テンプレートがhtmlにレンダリングされる前に呼び出されます。つまり、一部の属性値は通常、初期化されてからビューにレンダリングされます。このとき、DOMノードを操作すると、対応する要素が見つかりません。
   • Mounted：テンプレートがhtmlにレンダリングされた後に呼び出されます。通常、初期化ページが完了した後、いくつかの必要な操作がhtmlのdomノードで実行されます。
3. • レンダリングプロセスを読み込みます。父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted
   • サブコンポーネントの更新プロセス：父beforeUpdate->子beforeUpdate->子updated->父updated
   • 親コンポーネントの更新プロセス：父beforeUpdate->父updated
   • 破壊プロセス： 父beforeDestroy->子beforeDestroy->子destroyed->父destroyed

4. すべてのライフサイクルフックはthisコンテキストをインスタンスに自動的にバインドするため、矢印関数を使用してライフサイクルメソッドを定義することはできません

参照：vueのライフサイクルにおけるフック関数と、フックがvueがajaxリクエストを送信する親コンポーネントと子コンポーネントの実行順序