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 エラー処理方法の推奨

推薦する

Linux インストール MySQL5.6.24 使用手順

Linux インストール MySQL ノート1. MySQL データベース サーバーをインストールす...

フロントエンドパフォーマンス最適化に関する補足記事

序文私は、Web サイトのフロントエンド パフォーマンス最適化のための JavaScript と C...

vscode を使用したリモート Linux 開発の実装

過去に別れを告げるvscode にリモート SSH が導入される前は、Linux サーバー開発者の多...

MySQL のインデックスの種類と基本的な使用例

目次索引- 総合索引- ユニークなインデックス- 主キーインデックス- 複合インデックス- 全文索引...

Docker コンテナのマウントディレクトリ操作の表示

Dockerコンテナのマウントディレクトリ情報のみを表示する docker 検査 --format ...

MySQLカバーインデックスの利点

一般的な提案は、WHERE 条件のインデックスを作成することですが、これは実際には一方的です。インデ...

mysql zipファイルのインストールチュートリアル

この記事では、参考までにMySQL zipファイルをインストールする具体的な方法を紹介します。具体的...

ホストがアクセスできるようにMySQLの権限を変更する方法

mysqlのリモートアクセス権を有効にするデフォルトでは、MySQL ユーザーにはリモート アクセス...

CentOS7 ファイアウォールとオープンポートの簡単な使い方の簡単な紹介

概要(公式にはより詳しい説明があります) Firewalld は、ネットワーク接続またはインターフェ...

Dockerイントラネット侵入FRP展開の実装プロセスの分析

1. 設定ファイルディレクトリを作成するcd /ホームディレクトリmkdir frp最終的なディレク...

MySQL binlog を開く手順

Binlog は、MySQL データの変更を記録するために使用されるバイナリ ログ ファイルです。B...

異なる列を持つテーブルのクエリ結果のSQLマージ操作

2 つの異なるテーブルをクエリするには、結果をマージする必要があります。たとえば、table1 の列...

開発にVscodeとdockerを組み合わせて使用​​する詳細なプロセス

序文Docker と VS Code を使用すると、ローカル開発環境全体を最適化し、プロジェクトの進...

Angularルーティングの基礎の詳細な説明

目次1. ルーティング関連オブジェクト2. ルーティングオブジェクトの場所3. ルーティング構成4....

ノードを使用して静的ファイルキャッシュを実装する方法

目次キャッシュキャッシュ位置の分類キャッシュ設定ヘッダーNodeは静的ファイルキャッシュを実装する強...