Vue のライフサイクルのいくつかの段階

4 つの主要な段階があります: 1. 初期化段階 (beforeCreate (作成前) および created (作成後) の 2 つの小さな段階を含む); 2. マウント段階 (beforeMount (ロード前) および Mounted (ロード) After) 2 つの小さなステージ; 3. 更新ステージ (更新前) と更新済み (更新後) の 2 つの小さなステージを含む更新ステージ; 4. 破壊ステージ、Destroy (破壊前) と破壊 (破壊後) の前の 2 つの小さなステージ。

#このチュートリアルの動作環境: Windows7 システム、vue3 バージョン、DELL G3 コンピューター。

ライフサイクルは、コンポーネントの作成から破棄までのプロセス全体です。 つまり、作成開始からデータの初期化、テンプレートのコンパイル、Domのマウント→レンダリング、更新→レンダリング、アンインストールなどの一連の処理です。これをVueのライフサイクルと呼んでいます

#ライフサイクルフック関数

は、ライフサイクルのある時点で自動的にトリガーされる関数であり、その機能は、特定の時点で特定の操作を実行することです。

Vue のライフサイクルは合計 11 あります。

は通常、一般的に使用される部分と非一般的な部分の 2 つの部分に分かれています。まず、一般的に使用される段階について説明します。 まずは公式絵の街づくりへ:

一般的に使用される手法は、大きく 4 つの段階と 8 つの方法に分けられます。

1. 初期化フェーズ

1.

beforeCreate

(作成前)# 後インスタンスが初期化され、データ オブザーバーとイベント/ウォッチャーのイベント構成が呼び出されます。

これは、この時点で Vue (コンポーネント) オブジェクトが作成されますが、Vue オブジェクトの属性 (たとえば、Data 属性、compute 属性など) がまだバインドされていないことを意味します。バインディング、つまり値がありません。

2.

created

(作成後) コンポーネント インスタンスの作成時に自動的にトリガーされ、vue オブジェクトのプロパティに値が設定されます。ですが、DOM It はまだ生成されておらず、

$el

属性もまだ存在しません。この時点ではデータが存在しており、通常はこのフック関数でデータを取得することになりますが、この時点ではdom構造が解析されていないため、domを操作することができません。

2. マウント段階

3.

beforeMount ( ロード前)

# はマウントの開始前に呼び出されます。関連するレンダリング関数が初めて呼び出されます。この段階で、$el と vue インスタンスの data の両方が初期化されます。

この時点では、this.$el には値があり、ただし、前の仮想 dom ノードにまだマウントされており、data.message になります。は置き換えられていません。データはまだページにマウントされていません。 4. mounted

(ロード後)

mounted

ステージでは、vue インスタンスがマウントされます. 、data.message は正常にレンダリングされます。

つまり、この時点でデータベースがページにマウントされているため、ページ上で正しいデータが表示されます。 一般的に、ここでは非同期リクエスト (ajax、fetch、axios など) を送信して、サーバー上のデータを取得し、DOM に表示します。

3. アップデートフェーズ

5. beforeUpdate

(アップデート前)

データが更新されたときに呼び出されます。vue (コンポーネント) オブジェクトに対応する DOM の内部 (innerHTML) は変更されていません。これは、手動で削除するなど、更新前に既存の DOM にアクセスするのに適しています。追加されたイベントリスナー。サーバー側では最初のレンダリングのみが行われるため、このフックはサーバー側のレンダリング中に呼び出されません。

6. updated

(更新)

データ変更による仮想 DOM の再レンダリングとパッチ適用、この後呼ばれます。

#4. 破壊フェーズ

##7. beforeDestroy

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

は呼び出されません。

8. destroyed (破棄後)

Vue インスタンスが破棄された後に呼び出されます。 。呼び出し後、Vue インスタンスが指すすべてのバインドが解除され、すべての

イベント リスナーが削除され、すべての子インスタンスが破棄されます。このフック

# は、サーバー側のレンダリング中には呼び出されません。

#5. あまり使われない残りのフック関数

## 残りの 3 つのフック関数は使用されます。ほとんどありませんが、それについて学んでください。

9.

activated (コンポーネントがアクティブ化されたとき)

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

10.

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

11.

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

[関連する推奨事項: vuejs ビデオ チュートリアル

、

Web フロントエンド開発]

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