Vue コンポーネントのライフサイクルとは何ですか

vue コンポーネントでは、ライフ サイクルはコンポーネントの作成からコンポーネントの破棄までのプロセス全体を指します。このプロセスのいくつかの異なる段階で、vue は指定されたコンポーネント メソッドをいくつか呼び出します。基本的なライフサイクル機能には、作成ステージ、マウントステージ、更新ステージ、アンインストールステージなどのステージがあります。

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

1. コンポーネントのライフ サイクル

コンポーネントのライフ サイクルとは、コンポーネントの作成から破棄までのプロセスを指します。 process.stage、vue は、指定されたコンポーネント メソッドをいくつか呼び出します。

基本的なライフサイクル機能には次のステージがあります:

• 作成フェーズ
• マウントフェーズ
• 更新フェーズ
• アンロードフェーズ
• その他

各フェーズは、before と after の 2 つの機能に対応します。

#2. 作成フェーズ

2-1. beforeCreate()

インスタンスの初期化中その後、データ オブザーバーとイベント/ウォッチャーのイベント設定が呼び出されます。初期化段階では、アプリケーションはそれほど多くありません。

2-2. created()

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

$el プロパティはまだ使用できません。

3. マウント段階

3-1. beforeMount()

がマウントされます。読み込みが開始される前: 関連する

render 関数が初めて呼び出されます。

3-2.mounted()

この段階では、テンプレートの解析とマウントが完了します。同時に、コンポーネントのルートコンポーネント要素には

$el 属性が割り当てられ、この段階でコンポーネントの内部要素は DOM 操作を通じて処理できるようになります。

4. 更新フェーズ

4-1. beforeUpdate()

データが更新されるときupdated 呼び出されますが、まだビューの再描画は行われていないため、この時点ではビューが更新される前の状態を取得できます。

4-2. updated()

データの変更によりビューが再レンダリングされた場合は、 # を通じてビューの最新のビューを取得できます。 ##DOM

操作の状態。

5. アンインストール フェーズ

5-1. beforeDestroy()

インスタンスの前is destroy タイマーなどの不要な冗長データを削除するために呼び出されます。

5-2.destroyed()

Vue インスタンスが破棄された後に呼び出されます。

6、その他

6-1、.$nextTick()

が呼び出しますback 次の DOM 更新サイクルまで実行を遅らせます。データを変更したらすぐに使用し、DOM が更新されるまで待ちます。これはグローバル メソッド

Vue.nextTick

と同じですが、コールバックの this がそれを呼び出すインスタンスに自動的にバインドされる点が異なります。 は

updated

に似ており、this.$nextTick() はローカル データ更新および DOM 更新後の操作に使用でき、グローバル updated ライフサイクル関数。

6-2. errorCaptured()

は、子孫コンポーネントからエラーをキャプチャするときに呼び出されます。このフックは 3 つのパラメータを受け取ります: エラー オブジェクト、発生 コンポーネント インスタンスエラーと、エラーの原因に関する情報を含む文字列。このフックは

false

を返して、エラーがさらに上方に伝播するのを防ぐことができます。

7. ライフ サイクルのいくつかの使用シナリオ**作成: **非同期データの取得と初期化データの ajax リクエストを実行します

#**mounted：**実装要素domノードの取得

**$nextTick：**単一イベントのデータ更新直後のdom操作

**updated： * *データの更新

[関連する推奨事項: "

vue.js チュートリアル

"]

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