ホームページ > 記事 > ウェブフロントエンド > Vue のライフサイクルのいくつかの段階
#このチュートリアルの動作環境: Windows7 システム、vue3 バージョン、DELL G3 コンピューター。4 つの主要な段階があります: 1. 初期化段階 (beforeCreate (作成前) および created (作成後) の 2 つの小さな段階を含む); 2. マウント段階 (beforeMount (ロード前) および Mounted (ロード) After) 2 つの小さなステージ; 3. 更新ステージ (更新前) と更新済み (更新後) の 2 つの小さなステージを含む更新ステージ; 4. 破壊ステージ、Destroy (破壊前) と破壊 (破壊後) の前の 2 つの小さなステージ。
ライフサイクルは、コンポーネントの作成から破棄までのプロセス全体です。 つまり、作成開始からデータの初期化、テンプレートのコンパイル、Domのマウント→レンダリング、更新→レンダリング、アンインストールなどの一連の処理です。これをVueのライフサイクルと呼んでいます
#ライフサイクルフック関数は、ライフサイクルのある時点で自動的にトリガーされる関数であり、その機能は、特定の時点で特定の操作を実行することです。
Vue のライフサイクルは合計 11 あります。は通常、一般的に使用される部分と非一般的な部分の 2 つの部分に分かれています。まず、一般的に使用される段階について説明します。 まずは公式絵の街づくりへ:
一般的に使用される手法は、大きく 4 つの段階と 8 つの方法に分けられます。1. 初期化フェーズ
(作成前)# 後インスタンスが初期化され、データ オブザーバーとイベント/ウォッチャーのイベント構成が呼び出されます。
これは、この時点で Vue (コンポーネント) オブジェクトが作成されますが、Vue オブジェクトの属性 (たとえば、Data 属性、compute 属性など) がまだバインドされていないことを意味します。バインディング、つまり値がありません。
2.
created(作成後) コンポーネント インスタンスの作成時に自動的にトリガーされ、vue オブジェクトのプロパティに値が設定されます。ですが、DOM It はまだ生成されておらず、
$el属性もまだ存在しません。この時点ではデータが存在しており、通常はこのフック関数でデータを取得することになりますが、この時点ではdom構造が解析されていないため、domを操作することができません。
2. マウント段階beforeMount ( ロード前)
# はマウントの開始前に呼び出されます。関連するレンダリング関数が初めて呼び出されます。この段階で、$el と vue インスタンスの data の両方が初期化されます。この時点では、this.$el には値があり、ただし、前の仮想 dom ノードにまだマウントされており、data.message になります。は置き換えられていません。データはまだページにマウントされていません。 4. mounted
(ロード後)mounted
ステージでは、vue インスタンスがマウントされます. 、data.message は正常にレンダリングされます。つまり、この時点でデータベースがページにマウントされているため、ページ上で正しいデータが表示されます。 一般的に、ここでは非同期リクエスト (ajax、fetch、axios など) を送信して、サーバー上のデータを取得し、DOM に表示します。
3. アップデートフェーズ
データが更新されたときに呼び出されます。vue (コンポーネント) オブジェクトに対応する DOM の内部 (innerHTML) は変更されていません。これは、手動で削除するなど、更新前に既存の DOM にアクセスするのに適しています。追加されたイベントリスナー。サーバー側では最初のレンダリングのみが行われるため、このフックはサーバー側のレンダリング中に呼び出されません。
6. updated
(更新)データ変更による仮想 DOM の再レンダリングとパッチ適用、この後呼ばれます。
#4. 破壊フェーズ
#(破棄前) インスタンスが破棄される前に呼び出されます。このステップでは、インスタンスはまだ完全に利用可能です。このフックはサーバー側でレンダリングされます 期間中は は呼び出されません。 8. destroyed (破棄後) ## 残りの 3 つのフック関数は使用されます。ほとんどありませんが、それについて学んでください。 activated (コンポーネントがアクティブ化されたとき) 10. deactivated (コンポーネントが非アクティブ化された場合) keep-alive コンポーネントが非アクティブ化されるときに呼び出されます。このフックは、サーバー側のレンダリング中には呼び出されません。 11. errorCaptured(2.5.0 の新機能) (エラーがキャプチャされた場合) 子孫コンポーネントからエラーをキャッチしたときに呼び出されます。このフックは、エラー オブジェクト、エラーが発生したコンポーネント インスタンス、およびエラーの原因に関する情報を含む文字列の 3 つのパラメータを受け取ります。このフックは、エラーがさらに上方に伝播するのを防ぐために false を返すことができます。 [関連する推奨事項: vuejs ビデオ チュートリアル Web フロントエンド開発]#5. あまり使われない残りのフック関数
以上がVue のライフサイクルのいくつかの段階の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。