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