ライフサイクル図

ライフサイクルとは?

vueインスタンスまたは構成部品を作成すると、いくつかの事前定義フェーズ、すなわちライフサイクルが発生します.
すなわち、Vueインスタンスを作成すると、ライフサイクルと呼ばれる消失フェーズが表示されます.

ライフサイクルの4段階

本書で説明します.
vueインスタンスは、作成、インストール、更新、および消去の4つのフェーズを経験します.
各ステップにおいて、vueは、Hookを有効にするためのAPIを提供する.
よく使われるHOOKタイプは、beforeCreate、created、beforeMount、mounted、beforeUpdate、、updated、、beforeDestroy次に、各ステップとその使用するhookを見てみましょう.

作成さくせい:構成部品の初期化手順もでるのしょきかてじゅん

この手順は、ドームにコンポーネントを追加する前の手順です.
したがって、このステップで実行されるhookは、ライフサイクルで最初に実行されるhookであり、サーバレンダリングでサポートされるhookでもあります.
したがって、クライアントとサーバ側のレンダリングの両方を処理する必要がある場合は、この手順で完了できます.destroyed:すべてのhookで最初に実行されるhook.コンポーネントをdomに追加する前に、this.$elにアクセスできません.もちろん、データ、イベント、メソッドにアクセスできません.beforeCreate:データとイベントがアクティブになり、アクセスできます.ただし、テンプレートと仮想domはインストールまたはレンダリングされていないため、アクセスできません.
通常、データを取得して構成部品で使用するデータを設定する場合、イベントリスナーを宣言するときに使用されます.

Mount：Dom挿入手順

この手順では、初期レンダリング前の構成部品に直接アクセスできます.サーバレンダリングはサポートされていません.
この手順は、初期レンダリング前にドームを変更する場合に使用します.created:最初のレンダリングの前に実行します.ほとんどの場合は使用しません.beforeMount:アクセス可能な構成部品、テンプレート、およびレンダリングドーム.
親と子の関係にある構成部品は、子のマウントフックを実行すると、親のマウントフックが実行されます.
ただし、親のマウントフックが動作している場合、すべてのサブ構成部品がマウントされていることは保証されません.(非同期なので)
親コンポーネントで使用mounted次のようになります.

mounted(){
	this.$nextTick(function(){
    	// 모든 화면이 렌더링 된 후 실행합니다.
    })
}

プロジェクトでマウント手順を使用した例this.$refsにアクセスしたい場合があります.(refsはレンダリング後に定義されるため)

更新:Diffと再レンダリング手順

構成部品で使用されている反作用アトリビュートを変更または再レンダリングするには、次の手順に従います.this.$nextTick:このhookは、素子のデータが変化したため、更新サイクルが開始される前に実行される.beforeUpdate:構成部品のデータが変化し、再レンダリングが発生した後に実行されます.ドームは更新されているのでドーム従属演算が可能で、ここで状態を変更すると無限ループに陥る可能性があります.

設計：取り外し手順

updated:ビューインスタンスの分解前に呼び出されたhook.通常、イベントリスナーを削除したり、レスポンスサブスクリプションを削除したりするために使用されます.beforeDestroy:ビューインスタンスが削除された後に呼び出されたhook.