beforecreate：コンポーネントインスタンスが初期化されている場合、データとイベントは現(xiàn)時點では設(shè)定されていないため、$ data and this。$ elにアクセスできません。 2。作成：インスタンスが作成された後に呼び出され、データとメソッドは初期化されていますが、DOMはマウントされておらず、データの初期化とAPI呼び出しに適しています。 3。beforemount：マウントの前に呼び出されると、テンプレートはコンパイルされていますが、DOMにレンダリングされていません。これはめったに使用されません。 4。マウント：コンポーネントマウントの後に呼び出されます。これは利用可能です。これは、DOM操作、サードパーティライブラリの初期化、またはデータ収集によく使用されます。 5。前update：再レンダリング前にデータが更新されたときに呼び出され、更新する前にDOM狀態(tài)にアクセスできます。 6。更新：コンポーネントの更新後に呼び出され、DOMが再レンダリングされました。これは更新されたDOM操作の実行に適しており、ループトリガーを防ぐために保護(hù)されていない狀態(tài)の変更が必要です。 7。前（Vue 3）/Beforedestroy（Vue 2）：コンポーネントのアンインストールの前に呼び出され、インスタンスはまだ利用可能であり、イベントリスナー、タイマー、サブスクリプションなどはここでクリーニングする必要があります。 8。マウントなし（VUE 3）/破壊（VUE 2）：コンポーネントのアンインストール後に呼び出され、すべてのバインディングとサブコンポーネントが削除され、最終的なクリーニングまたはロギングに使用できます。さらに、エラーキャプチャされたサブコンポーネントエラーをキャプチャするために使用され、レンダリングされ、レンダリングされたレンダリング（VUE 3）が使用され、応答性の依存関係がデバッグされます。ライフサイクルの順序は次のとおりです。beforecreate→作成→作成→beforemount→マウント→マウント→アップデート→更新→アンマウント→マウント前に、APIの構(gòu)成は、オンマウントやオンアップなどの関數(shù)を使用し、実行順序は不変のままです。ベストプラクティスは、できるだけ早くデータを取得することをお勧めします。作成された作成は、特にサーバー側(cè)のレンダリングシナリオで、マウントされたよりもリクエストを開始するのに適しています。

Vue.jsでは、ライフサイクルフックは、創(chuàng)造から破壊まで、コンポーネントの生活の特定の段階でコードを?qū)g行できる特別な方法です。彼らの順序を理解することは、データの取得、DOM操作、クリーンアップなどのタスクにとって殘酷です。

VUEコンポーネント（オプションAPIを使用）のメインライフサイクルフックは次のとおりです。

beforeCreate

• コンポーネントインスタンスが初期化されたときに正しいと呼ばれます。
• この時點で、データ観察、イベント、および反応性の特性はまだ設(shè)定されていません。
• this.$data and this.$elアクセスできません。

ユースケース：めったに使用されませんが、初期化の問題をデバッグするのに役立ちます。

2。 created

• インスタンスが作成された後に呼び出されます。
• データ、メソッド、計算されたプロパティ、およびウォッチャーが設(shè)定されました。
• ただし、コンポーネントのDOM要素（ $el ）はまだ作成されていないため、テンプレートまたはマウントポイントにアクセスすることはできません。

ユースケース：初期データセットアップ、API呼び出しの開始、イベントリスナーのセットアップに最適です。

beforeMount

• コンポーネントが取り付けられようとしている直前に実行されます（DOMにレンダリングされます）。
• テンプレートはコンパイルされていますが、DOMレンダリングはまだ発生していません。

ユースケース：一般的に使用されていませんが、レンダリング前の最終チェックに役立ちます。

4。 mounted

• コンポーネントがマウントされ、DOMがレンダリングされた後に呼び出されます。
• this.$el利用可能になり、アクセスできます。
• コンポーネントに子コンポーネントがある場合、それらはすべてマウントされているわけではありません。

ユースケース：一般的に使用されます：

• 初期データを取得する（ createdている場合もありますが）
• DOM要素の操作（例えば、第三者ライブラリの初期化）
• 時間またはサブスクリプションを設(shè)定します

5。update beforeUpdate

• Virtual Domが再レンダリングおよびパッチが変更される前に、リアクティブデータが変更されたときに呼び出されます。
• ここで古いDOM狀態(tài)にアクセスできます。

ユースケース：更新前のキャッシュデータやロジックの実行に役立ちます。

6。 updated

• データの変更により、コンポーネントのDOMが再レンダリングされた後に呼び出されました。
• 仮想DOMは再レンダリングされ、パッチが適用されています。

ユースケース：更新後にDOM操作を?qū)g行します。注意してください - 無限のループを防ぐために、警備されていない限り、ここで狀態(tài)を変更しないでください。

7。 beforeUnmount （vue 3） / beforeDestroy （vue 2）

• コンポーネントが破壊される直前に呼び出されます。
• インスタンスはまだ完全に機(jī)能しています。
• クリーンアップタスクはここで行う必要があります。

ユースケース：クリーンアップに不可欠：

• イベントリスナー
• タイマー（ setInterval 、 setTimeout ）
• サブスクリプションまたはWebSocket接続
• サードパーティの統(tǒng)合

8。 unmounted （VUE 3） / destroyed （VUE 2）

• コンポーネントがDOMから削除され、そのすべてのバインディングがアンバウンドされた後に呼び出されます。
• すべての子コンポーネントも破壊されます。

ユースケース：最終的なクリーンアップまたはロギング。コンポーネントインスタンスは使用できなくなりました。

オプション：エラーフックの取り扱い

• errorCaptured ：子孫コンポーネントからのエラーがキャプチャされたときに呼び出されます。
• renderTracked / renderTriggered （VUE 3）：レンダリング中に反応性を追跡するためのデバッグフック。

実行命令の概要：

 beforecreate
 →作成
 →beforemount
 →マウント
 →update前
 →更新
 →verunmount // Vue 2のbeforedestroy 2
 →マウントされていない// VUE 2で破壊された

anutea法： Vue 3 Composition APIでは、 onMounted() 、 onUpdated()などsetup()使用します。

クイックヒント：
以前に実行できる場合は、 mountedデータを取得しないでください。特にSSR（サーバー側(cè)のレンダリング）コンテキストで、できるだけ早くデータの読み込みを開始する方が良いことがよくありcreated 。

基本的に、フローに従ってください：セットアップ→レンダリング→更新→クリーンアップ。

以上がVueコンポーネントのライフサイクルフックは何ですか、そして彼らはどのような順序で呼ばれていますかの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。