vue3 のライフサイクルとは何ですか

Vue3 ライフ サイクル: 1. beforeCreate; 2. 作成; 3. beforeMount; 4. マウント; 5. beforeUpdate; 6. 更新; 7. beforeDestroy; 8. 破棄; 9. アクティブ化; 10. 非アクティブ化; 11. errorCaptured; 12. getDerivedStateFromProps など。

Vue 3 では、新しいライフサイクル フック関数が導入されており、一部の古いフック関数はリファクタリングまたは削除されました。以下は、Vue 3 のライフサイクル フック関数の一部です:

1. beforeCreate: インスタンスが作成される前に呼び出されます。この時点ではまだマウントされておらず、データ オブザーバー (データ オブザーバー) およびイベントはまだ初期化されていません。

2. created: インスタンス作成後に呼び出されます この時点ではデータ観測(データオブザーバー)とイベントの初期化は完了していますが、DOMはまだマウントされていません。

3. beforeMount: マウント前に呼び出され、関連するレンダリング関数が初めて呼び出されます。この時点でテンプレートをコンパイルしてレンダリングできます。

4.mounted: インスタンスが DOM にマウントされた後に呼び出されます。この時点で、すべての el と ref が解析され、$refs が埋められています。

5. beforeUpdate: データが更新されるとき、つまり仮想 DOM にパッチが適用される前に呼び出されます。この時点でステータスを更新したり、DOM を手動で変更したりできます。

6. updated: データ更新の完了後、つまり仮想 DOM にパッチが適用され DOM が更新された後に呼び出されます。

7. beforeDestroy: インスタンスが破棄される前に呼び出されます。この段階では、インスタンスはまだ完全に利用可能です。

8.destroyed: インスタンスが破棄された後に呼び出されます。呼び出し後、すべてのイベント リスナーとサブコンポーネントが削除され、すべてのサブコンポーネントの破棄フックも呼び出されます。

9. アクティブ化: アクティブ化されたキープアライブ コンポーネントが再入すると呼び出されます。

10. 非アクティブ化: アクティブ化されたキープアライブ コンポーネントが終了するときに呼び出されます。

11. errorCaptured: キャプチャフェーズでエラーを処理するときに呼び出されます。このフックが値を返さない場合、または false を返す場合は、親コンポーネントの errorCaptured フックが引き続き呼び出されます。それ以外の場合、エラーはそれ以上処理されません。

12. getDerivedStateFromProps: 各レンダリングの前に呼び出され、プロパティから状態を取得するために使用されます。これは、コンポーネントの作成前または破棄後に変更できる静的メソッドです。

13、renderTracked および renderTriggered: これら 2 つのフックはレンダリング プロセス中にトリガーされます。前者はレンダリングの追跡時にトリガーされ、後者はレンダリングが強制的にトリガーされたときにトリガーされます。

14. セットアップ: Vue 3 では、コンポーネント オプション API が複合 API に置き換えられました。 setup 関数は、Composition API のエントリ ポイントであり、コンポーネント ロジックを整理して再利用するために使用されます。これは、コンポーネント オプションを定義するための、より強力かつ柔軟な新しい方法です。

上記はVue 3のライフサイクルフック機能です。 Vue 3 では基礎となるレイヤーに多くの最適化が行われたため、一部の古いフック関数 (init、ready など) が削除されるか、他のフック関数にマージされていることに注意してください。同時に、Vue 3 では、アクティブ化、非アクティブ化、errorCaptured など、パフォーマンスとエラー処理を最適化するためのいくつかの新しいフック関数も追加されています。

以上がvue3 のライフサイクルとは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。