Vue - Life Cycle

[Vue Life Cycle ]

仮想ライフサイクルとは?

Vueライフサイクルのプロパティ

仮想ライフサイクルとは?

: new Vue();//ビューインスタンス
1. beforeCreate:最初に実行されるhook
2.create:computed、watchなどのデータをバインドして制御するコードを作成して使用し、これらのオプション設定の時点を完了する
3.beforMounte:DOMに構成部品を追加する前に呼び出す
4.マウント:構成部品をDOMに追加して呼び出す
5.beforeUpdate:DOMに構成部品を追加した後、データ変形時に再レンダリングを行い、再レンダリング前に実行する
6.update:再レンダリング完了後に呼び出す
7.beforeDestory:構成部品を終了するとき、別の構成部品を移動するとき(破棄する前に呼び出す)
8.destroyed:構成部品が完全に除去された後に呼び出されたhook

2.仮想ライフサイクルの属性

: Vue.jsのライフサイクルは大きく4つに分けられます.
⇒ Creation, Mounting, Updating, Destruction

作成(構成部品初期化フェーズ)

以前に作成された最初のHookは、データまたはイベントが確立されていないため、アクセスできません.

によって作成されたデータです.イベントはアクセス可能ですが、テンプレートと仮想DOMはマウントおよびレンダリングされていません.

マウント(DOMステップを挿入)

プリマウントテンプレートまたはレンダリング関数は、コンパイル後の最初のレンダリングの前に実行される回数が多くありません.

マウント構成部品、テンプレート、およびDOMをレンダリングできるすべての画面をレンダリングした後に実行

[ 주의할 점 ]

⇒ 부모와 자식 관계의 컴포넌트에서 생각한 순서대로 mounted가 발생하지 않는다. 

(부모는 자식의 mounted 훅이 끝날 때까지 기다림)

更新(レンダリングフェーズ)

:デバッグ用に構成部品が再レンダリングされるタイミングを知る必要がある場合に使用できます.

更新前の構成部品のデータが変更され、更新サイクルの開始時に実行されます(ドームが再レンダリングされ、パッチが適用される前に).

更新された構成部品のデータが変更され、再レンダリング後に更新が完了し、DOMに依存する演算が可能になります.

設計（取り外し手順）

は、分解を設計する前に呼び出されたイベントリスナーを削除したり、応答サブスクリプションを削除したりするのに役立ちます.

バインディング解除後に呼び出されたVueインスタンスのすべてのディレクトリを破棄し、すべてのイベントリスナーが

を削除する.