Vueのライフサイクルについて詳しく説明します

序文

最近、Vueを学ぶ人が増えています。VueフレームワークやReactフレームワークを学ぶことも、フロントエンド開発者にとって必須のスキルとなっています。今日はVueのライフサイクル関数についてお話します。Vueのライフサイクル関数の参照価値は非常に高いです。一緒に知りましょう〜

1. Vue2 のライフサイクル

インスタンスのライフサイクル

ライフサイクルを紹介する前に、Vue でページ コンテンツをレンダリングするときに、次のプロセスが発生することを知っておく必要があります。

1. 文法を解析すると AST が生成されます。
2. AST の結果に従って、データの初期化を完了します。
3. AST 結果とデータ バインディングに基づいて仮想 DOM を生成します。
4. 仮想 DOM は実際の DOM を生成し、それをページに挿入します。その時点でページがレンダリングされます。

バインドされたデータが更新されると、次のプロセスが発生します。

1. フレームワークはデータ変更イベントを受信し、そのデータに基づいて新しい仮想 DOM ツリーを生成します。古い仮想 DOM ツリーと新しい仮想 DOM ツリーを比較して、違いを確認します。
2. 実際の DOM ツリーに差異を適用します。つまり、差異に応じてページ コンテンツを更新します。

ページのコンテンツをクリアすると、次のようになります。

1. インスタンスからログアウトし、ページ コンテンツをクリアし、バインドされたイベントやリスナーなどを削除します。

Vue はインスタンスに対して合計 8 つのライフサイクル関数を提供します。

1. beforeCreate(): インスタンスを初期化する前は、データやメソッドなどを取得できません - 1の後、2の前
2. created(): インスタンス化の初期化が完了しました。この時点で、データとメソッド イベントでデータを取得できます (2 の後、3 の前)
3. beforeMount(): 仮想DOMは作成されますが、ページにマウントされていません。vm.$elはマウントされていないテンプレートを取得できます - 3の後、4の前
4. マウント（）：データバインディングが完了し、実際のDOMがページにマウントされ、vm.$elは実際のDOMを取得できます——4
5. beforeUpdate(): データが更新され、DOM Diff は差分を取得しますが、ページは更新されません - 5 以降、6 以前
6. updated(): データが更新され、ページも更新されます - 6
7. beforeDestroy(): インスタンスの破棄前 - 7 以前
8. 破棄(): インスタンスの破棄が完了しました - 7

インスタンスのライフサイクルについては、公式の図も参照してください。

その他のライフサイクルフック

その他のライフサイクル関数には activated()、deactivated()、errorCaptured() などがあります。

キープアライブの固有のライフ サイクルがアクティブ化および非アクティブ化されます。

keep-alive でラップされたコンポーネントは、切り替え時に破棄されずにメモリにキャッシュされ、非アクティブ化されたフック関数を実行します。キャッシュレンダリングをヒットした後、アクティブ化されたフック関数が実行されます。

errorCaptured() フックは、子コンポーネントでエラーがキャプチャされたときに呼び出されます。

2. Vue3のライフサイクル

Vue3 では、Options API と Composition API を使用する場合、ライフサイクルが異なります。

オプション API ライフサイクル

• beforeDestroy が beforeUnmount に変更されました
• 破壊されてマウント解除

なぜこのように変更したのかと尋ねられた You Dada 氏は、これは主に命名規則を改善するためだと答えました。対応する中国語の単語はまさにアンインストール コンポーネントであり、以前のマウント コンポーネントと非常に一致しています。

• その他のライフサイクルはVue2に従います

コンポジション API ライフサイクル

Composition API でフック関数を使用するには、フック関数の前に「on」を追加し、setup 関数内で次のようになります 👇

これらのフック関数を導入するだけで、

Vue3 のフック関数は次のとおりです。

1. マウント前()
2. マウント時()
3. 更新前()
4. 更新時()
5. マウント解除前()
6. マウント解除時()
7. アクティブ化()
8. onDeactivated()
9. エラーキャプチャ時()

よく見ると、2 つのライフサイクル メソッドが消えていることがわかります。BeforeCreate() と created() は Composition API に表示されなくなります。setup() メソッドのみがあります。setup() メソッドは beforeCreate() と created() の間に表示されます。

2つの新しいVue3ライフサイクル関数

• onRenderTracked(): この関数は、レンダリング関数でリアクティブ依存関係に初めてアクセスしたときに呼び出されます。このフックは、どの依存関係が追跡されているかを確認したいときに便利です。デバッグにも役立ちます。
• onRenderTriggered(): これは、新しいレンダリングがトリガーされたときに呼び出され、どの依存関係がコンポーネントの再レンダリングをトリガーしたかを検査できるようにします。

やっと

⚽この記事では主にVueのライフサイクル機能について紹介します。何か得られるものがあると思いますよ〜

Vue ライフサイクルに関するこの記事はこれで終わりです。Vue ライフサイクルに関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。