Vue ライフサイクルフック関数とは何か、またそれらがいつトリガーされるかについて話しましょう

この記事では、vue に関する関連知識を提供します。主に、vue ライフ サイクル フック関数とは何か、いつトリガーされるかを紹介します。vue ライフ サイクルは、誕生から開始までのコンポーネントです。死の完全なサイクル. 皆様のお役に立てれば幸いです。

[関連する推奨事項: javascript ビデオ チュートリアル、vue.js チュートリアル]

vue ライフサイクル フックFunction

Vue のライフサイクルはコンポーネントの誕生から消滅までの完全なサイクルです

主に次の 4 つの段階で構成されます:作成、マウント、更新、破棄

#作成前:
• beforeCreate、作成後: created
マウント前:
• beforeMount、マウント後: マウントされた
更新前:
• beforeUpdate、更新後: updated
破壊前:
• beforeDestroy、破壊後: destroyed

私が普段よく使うフックは作成とマウントです。作成はバックグラウンド データを取得するために使用され、マウントは dom がマウントされた後に使用されます。 Destroy ユーザーがタイマーやバインド解除イベントなどをクリアする前に、操作、プラグインの初期化などを実行します。

さらに、頻繁に作成および破棄する代わりに、インスタンスをキャッシュするための組み込みコンポーネントのキープアライブの使用も追加されます。 (オーバーヘッド大)

• actived インスタンスのアクティブ化
• deactived インスタンスの失敗

以下は詳細版

全員が理解できればOK:

ライフサイクルフック関数 (11) 関数(型)、青くマークされているものはその型に属することを意味します。

• beforeCreate 関数は、インスタンスの初期化後、データ オブザーバーおよびイベント/ウォッチャーのイベント構成の前に呼び出されます。

• #created 関数はインスタンスの作成直後に呼び出されます。このステップで、インスタンスはデータ オブザーバー、プロパティとメソッドの操作、監視/イベント イベント コールバックの構成を完了します。ただし、マウントフェーズはまだ開始されておらず、$el 属性は現在表示されていません。

• beforeMount マウントが開始される前に関数が呼び出されます。関連するレンダリング関数が初めて呼び出されます。

• mounted 関数 el は新しく作成された vm.el に置き換えられ、インスタンスにマウントされた後にフックが呼び出されます。ルート インスタンスがドキュメント内要素をマウントする場合、mount が呼び出されたときに vm.$el もドキュメント内にあります。

• beforeUpdate データが更新されると、仮想 DOM にパッチが適用される前に関数が呼び出されます。これは、追加されたイベント リスナーを手動で削除するなど、更新前に既存の DOM にアクセスする場合に適しています。サーバー側では最初のレンダリングのみが行われるため、このフックはサーバー側のレンダリング中に呼び出されません。

• updated 関数 このフックは、データ変更による仮想 DOM の再レンダリングとパッチ適用後に呼び出されます。

• activated コンポーネントがアクティブ化されると、関数 keep-alive が呼び出されます。このフックは、サーバー側のレンダリング中には呼び出されません。

• deactivated コンポーネントが非アクティブ化されると、関数 keep-alive が呼び出されます。このフックは、サーバー側のレンダリング中には呼び出されません。

• beforeDestroy 関数はインスタンスが破棄される前に呼び出されます。このステップでは、インスタンスはまだ完全に利用可能です。このフックは、サーバー側のレンダリング中には呼び出されません。

• destroyed Vue インスタンスが破棄された後に関数が呼び出されます。呼び出されると、Vue インスタンスが指すすべてのバインドが解除され、すべてのイベント リスナーが削除され、すべての子インスタンスが破棄されます。このフックは、サーバー側のレンダリング中には呼び出されません。

• errorCaptured (2.5.0 の新機能) (err: Error, vm: Component, info: string) => 子孫コンポーネントからエラーをキャプチャする場合のブール値が呼び出されます。 。このフックは、エラー オブジェクト、エラーが発生したコンポーネント インスタンス、およびエラーの原因に関する情報を含む文字列の 3 つのパラメータを受け取ります。このフックは、エラーがさらに上方に伝播するのを防ぐために false を返すことができます。

ライフサイクルのマウントとアクティブ化の使用と落とし穴

アクティブ化

アクティブ化について言えば、言及しなければなりません。これはキープアライブであり、スイッチアウトおよびバックアウト時に呼び出されます。 (ライフサイクルフック関数と理解して、使い方は同じです)

mounted

は、インスタンスがマウントされた後に呼び出されることを指します。はキープアライブではありません。毎回呼び出されます。コンポーネントはスイッチバック時に 1 回トリガーされますが、キープアライブは非アクティブなコンポーネント インスタンスをキャッシュするため、トリガーは 1 回だけであると言えます。したがって、一部のデータリクエストでは、戻ったときに新しいデータをリクエストできるように、ここにリクエストを書いてリクエストをアクティブにする必要があることがよくあります。

Step on the Pit

1. ここに例としてキーワードがありますが、これは、$refs を使用する場合は注意が必要であることを意味します。

2.mounted が最初に実行され、初回入力時には両方が一緒に実行されます

PS

キープアライブには、非常に多くの用途があります。

[関連する推奨事項: JavaScript ビデオ チュートリアル 、vue.js チュートリアル ]

以上がVue ライフサイクルフック関数とは何か、またそれらがいつトリガーされるかについて話しましょうの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。