Vueライフサイクルカメラの8つのフック関数

Vueライフサイクルカメラの8つのフック関数

1. beforeCreateとcreated関数

BeforeCreate と created は、初期化 (データ監視とデータ プロキシ) によって分割されます。

beforeCreate() を実行する前に、ライフサイクルと時間が初期化されますが、データ プロキシはまだ開始されていません。

(1)beforeCreate():データ監視とデータプロキシを初期化する前に、beforeCreate関数の内容が実行されます。現時点では、data 内のデータと methods 内のメソッドには Vm 経由でアクセスできません。

(2)created():データ監視とデータプロキシを初期化した後、beforeCreate関数の内容を実行します。この時点で、データ内のデータとメソッドに設定されたメソッドにvmを介してアクセスできます。

データがマウントされる前に、Vue がテンプレートを解析する (仮想 DOM を生成する) という別のステップがあります。解析されたコンテンツをページにまだ表示することはできません。

2. beforeMountとmount関数

(3)beforeMount(): Vueが仮想DOMの生成を完了した後、仮想DOMを実際のDOMに変換する前に実行されます。この時点で、ページには Vue によってコンパイルされていない DOM 構造が表示され、DOM に対するすべての操作は最終的に失敗します。

(4)mounted():仮想DOMが実DOMに変換された後に実行されます。この時点で、ページには Vue によってコンパイルされた DOM が表示され、DOM に対するすべての操作が有効になります (可能な限り回避してください)。初期化プロセスはここで終了します。通常、タイマーの開始、ネットワーク要求の送信、メッセージのサブスクライブ、カスタム イベントのバインドなどの初期化操作がここで実行されます。

3. beforeUpdate と updated 関数

(5)beforeUpdate():データが変更されると、新しい仮想DOMが生成され、古い仮想DOMと比較され、ページ更新(Model-》View)プロセスが最終的に完了する前に実行されます。この時点では、データは新しいですが、ページは古い、つまり、ページはまだデータと同期されていません。

(6)updated():データが変更されると新しい仮想DOMが生成され、古い仮想DOMと比較され、ページ更新(Model-》View)処理が完了した後に実行されます。この時点では、データは新しく、ページも新しく、つまりページとデータは同期されている。

4. beforeDestroy と destroy 関数

(7)beforeDestroy():データ監視、子要素、イベントリスニングを削除する前に実行されます。この時点で、VM 内のすべてのデータ、メソッド、命令などが使用可能な状態になり、破棄プロセスが実行されようとしています。通常、この段階では、タイマーのクローズ、メッセージの登録解除、カスタム イベントのバインド解除、その他の終了操作が実行されます。この時点ではすべてにアクセスできますが、操作を実行してもページ上のコンテンツは変更されません。

(8)destroyed():データ監視、子要素、イベントリスニングが削除された後に実行されます。ページ上のデータ、メソッド、命令などをアンバインドします。

要約する

この記事はこれで終わりです。皆さんのお役に立てれば幸いです。また、123WORDPRESS.COM のその他のコンテンツにも注目していただければ幸いです。

以下もご興味があるかもしれません:
  • Vue ライフサイクルにおけるコンポーネント化をご存知ですか?
  • Vue のライフサイクルとフック関数
  • Vue ライフサイクルの紹介とフック関数の詳細な説明
  • Vueコンポーネントライフサイクルフックの詳細な使用例

<<:  ページに間隔を空けてグリッドレイアウトを完璧に実装する方法

>>:  canvas.toDataURL image/png エラー処理方法の推奨

推薦する

例を通してBRタグとPタグの違いを理解する

<br />改行タグの使用<br>改行タグ<br>は終わりのない...

MySql インデックス使用戦略の分析

MySql インデックスインデックスの利点1. 一意のインデックスまたは主キー インデックスを作成す...

MySQL でスロークエリを有効にする方法の例

序文スロー クエリ ログは、MySQL で非常に重要な機能です。MySQL のスロー クエリ ログ機...

JavaScript 関数のパフォーマンスを測定するさまざまな方法の比較

目次概要パフォーマンス.nowコンソール.time時間精度を短縮注意事項分割して征服する入力値に注意...

MYSQL の解凍版における中国語の文字化け問題の解決方法

MYSQLの解凍バージョンがインストールされます1: 解凍後、my.ini ファイルをコピーし、バイ...

MySQLマスタースレーブデータベース構築方法の詳細な説明

この記事では、MySQL マスター/スレーブ データベースの構築方法について説明します。ご参考までに...

MySQL に絵文字表現を挿入できない問題の解決方法

序文最近この問題に遭遇するまで、私は UTF-8 が文字セットの問題に対する普遍的な解決策だと考えて...

コピー&ペーストはパッケージングの敵です

OO、デザイン パターン、および多くのオブジェクト指向の原則について話す前に、まず 1 つのことを習...

MySQLのトランザクション管理操作の詳細な説明

この記事では、MySQL のトランザクション管理操作について説明します。ご参考までに、詳細は以下の通...

MySQLデータベースのデータテーブルに関する詳細な基本操作

目次1. 現在のデータベース内のテーブルを表示する2. テーブルを作成する3. 指定されたテーブル構...

幅と高さが可変の要素を中央に配置するための CSS ソリューション

1. 水平中央公開コード: html: <div class="parent&quo...

HTML コード作成ガイド

共通コンベンションタグ自己終了タグ。閉じる必要はありません (例: img input br hr ...

MySQL 8.0.17 をインストールしてリモート アクセスを構成する方法

1. インストール前の準備データベースのバージョンを確認するコマンド: mysql --versio...

Ubuntu 16.4 で完全に分散された Hadoop 環境を構築するための実践的なチュートリアル

序文この記事は主にubantu 16.4 Hadoop完全分散構築に関する関連コンテンツを紹介し、皆...

小さなページングデザイン

ユーザーが目的のものを探すために前進するか後退するかを選択できるようにします。たとえば、Taobao...