ライフサイクルとは？
各Vueインスタンスは、作成されると一連の初期化処理を経ます。例えば、作成開始から、データの初期化、テンプレートのコンパイル、DOMのマウント、データが変更されたときのDOMの更新、アンインストールなどです。この一連の処理をVueのライフサイクルと呼びます。一般的には、Vueインスタンスの生成から破棄までの処理がライフサイクルです。このプロセスでは同時にライフサイクルフックと呼ばれる関数も実行され、ユーザはさまざまな段階で独自のコードを追加し、さまざまなフックを使用してビジネスコードを完成させることができます。
ライフサイクル図
ライフサイクルフック
beforeCreate: インスタンスが初期化された後、データ観測とイベント/ウォッチャー・イベント設定のためのインスタンス実行を作成するフック・イベントが呼び出されます。
created: はインスタンスが作成された直後に呼び出されます。この時点で、インスタンスは、データ観察、プロパティとメソッドの演算、およびウォッチ/イベント・ コールバック用に構成されています。ただし、マウント・フェーズはまだ開始されておらず、$el プロパティはまだ使用できません。
beforeMount: マウントの最初に呼ばれ、関連するレンダー関数が初めて呼び出されます。
mounted: インスタンスがマウントされた後に呼ばれ、elが新しく作成されたvm.$elに置き換えられます。ルート・インスタンスがドキュメント内の要素にマウントされている場合、vm.$elもドキュメント内にあります。
beforeUpdate: データが更新されたときに呼ばれ、仮想 DOM にパッチが適用されたときに発生します。これは、追加されたイベントリスナーを手動で削除するなど、既存の DOM へのアクセスを更新するときに適切です。
updated:このフックが呼ばれた場所で、データ変更による仮想DOMの再レンダリングとパッチ適用が行われます。このフックが呼ばれたとき、コンポーネントのDOMは更新されているので、DOM依存のアクションを実行できるようになります。しかし、ほとんどの場合、その間に状態を変更することは避けるべきです。それに応じて状態を変更したい場合は、通常、代わりにコンピューテッド・プロパティかウォッチャーを使用するのが最善です。
アプリケーション：最新のDOMを入手できます。
activated: キープアライブキャッシュコンポーネントがアクティブになったときに呼び出されます。
actived() { console.log('コンポーネントがアクティブになる'); }
deactivated: keep-alive によってキャッシュされたコンポーネントが無効になったときに呼ばれます。
deactivated() { console.log('コンポーネントが非アクティブ化される'); }
beforeDestroy: インスタンス破棄コール。このステップでは、インスタンスはまだ完全に利用可能です。
destroyed: インスタンスが破棄された後に呼び出されます。このフックが呼ばれると、Vueインスタンスに対応するすべてのディレクティブがバインド解除され、すべてのイベントリスナーが削除され、すべての子インスタンスが破棄されます。
