VueJSのライフサイクルとフック機能の応用について詳しく解説

この記事では、VueJS の ライフサイクル とフック 関数のアプリケーションについて説明します。VueJS のライフサイクルとフック関数のアプリケーションについて知らない場合は、この記事を一緒に見てみましょう。さて、くだらない話はやめて、本題に入りましょう

こんにちは、友達！幸いなことに、私の記事は皆さんにご覧いただけるので、この時点で vuejs のライフサイクルをより一般的に理解し、実際の開発におけるいくつかのフック関数のアプリケーション シナリオを知りたいと思われるはずです。ぜひご覧ください。すぐ下に描いてください。

1. vue のライフサイクル

ライフサイクルとは、簡単に言えば、物事が生成されてから消滅するまでの時間過程です。そして、vue のライフサイクルとは、作成開始、データの初期化、テンプレートのコンパイル、dom のマウント (レンダリング)、レンダリング -> 更新 -> レンダリング、破棄 (アンインストール) など、作成から破棄までのプロセスを指します。プロセス。

その後、フック関数は独自の責任を負い、より一般的に使用される関数は、関連するビジネス ロジックを関数内に記述することができます。

2. フック関数

Create

の後、インスタンスの初期化、データ監視、

event の後、ライフサイクル初期化設定の前に呼び出されます。

created

は、インスタンスの作成後に呼び出されます。このステップでは、インスタンスは次の構成を完了しています: データの観察、

プロパティとメソッドの操作、およびイベントコールバック。ただし、マウント段階はまだ開始されておらず、$el 属性は現在非表示です。

beforeMount

はマウントが開始される前に呼び出されます: 関連するレンダリング関数が初めて呼び出され、

仮想DOMがあります。

mounted

el は、新しく作成された vm.$el に置き換えられ、インスタンスにマウントされます。このフックを呼び出した後、

実際の DOM にレンダリングします。

beforeUpdate

は、データが更新される前に呼び出されます。これは、仮想DOMが再レンダリングされ、パッチが適用される前に発生します。 このフックでは状態をさらに変更できますが、追加の再レンダリング プロセスはトリガーされません。

更新されました

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

このフックが呼び出されると、コンポーネントの DOM が更新されるため、DOM に依存する操作を実行できるようになります。ただし、ほとんどの場合、更新の無限 ループ が発生する可能性があるため、この期間中に状態を変更することは避けてください。

注: このフックはサーバー側のレンダリング中には呼び出されません。

beforeDestroy

インスタンスが破棄される前に呼び出されます。この時点では、インスタンスはまだ利用可能です。

destroyed

vue は、インスタンスが破棄された後に呼び出されます。呼び出し後、vue インスタンスによって示されたすべてのバインドが解除され、すべてのイベント リスナーがアンインストールおよび削除され、すべての子インスタンスが破棄されます。

注: このフックはサーバー側のレンダリング中に呼び出されません。

関連する推奨事項:

Vuejs検索マッチング関数の例の詳細な説明

以上がVueJSのライフサイクルとフック機能の応用について詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。