寝て起きて寝て

プログラミングが出来ない情報系のブログ

Vueインスタンスのライフサイクルメモ

ライフサイクルとは

Vueのインスタンスが生成されてから破棄されるまでの流れ
ダイアグラムが公式にあるのでこれを見るとわかりやすい。
緑色の部分はVueが自動的に処理する部分で、開発者が弄ることはない(はず)
赤色の部分がライフサイクルフックと呼ばれるもので、この部分に関しては、

開発者が任意の処理を入れられるようになっている。

ライフサイクルフックに関してはVueインスタンスの初期化時に定義する必要がある。

各ライフサイクルフックについて

各ライフサイクルフックの説明の前に注意点
下記の様にライフサイクルフックの記述する際はアロー関数は使えない。

全てのライフサイクルフックは、データ、算出プロパティ、およびメソッドにアクセスできるようにするために、自動的にインスタンスに束縛する this コンテキストを持っています。これは、ライフサイクルメソッド(例 created: () => this.fetchTodos()) を定義するためにアロー関数を使用すべきではないことを意味します。アロー関数は、this が期待する Vue インスタンスではなく、this.fetchTodos が undefined になるため、親コンテキストに束縛できないことが理由です。

ちなみによく使うのは「created」「mounted」「beforeDestroy」

beforeCreate

インスタンス内のデータが初期化される前に呼び出せるもの。

なので、データを扱う処理は記載できない。

created

インスタンスが作成された後に呼ばれる。

データ監視、算出プロパティ、メソッド、watch/event コールバックらのオプションのセットアップ処理が完了

しているので、データを扱う処理を記載できる。

なのでなにかのAPIを使って値を取得・変数に格納する場合はここで実行することができる

定期的に実行したいタイマー処理を開始する場合もここに記載することがある。

ただし、$el プロパティはまだ利用できない。

beforeMount

テンプレートが更新された後の

マウンティングが開始される直前に呼ばれる。

また、サーバサイドレンダリングでは呼ばれない。

mounted

テンプレートから生成されたDOMが存在する為DOMの操作やイベントリスナー

の記載などを行うことができる。

ただし全ての子コンポーネントもマウントされていることを保証されない。

サーバサイドレンダリングでは呼ばれない。

beforeUpdate

データが変更されるとき、DOM が適用される前に呼ばれる。

更新前に既存の DOM にアクセスする場合に便利

updated

データが変更後、仮想 DOM が再描画されたときに呼び出される。

呼び出し時コンポーネントの DOM は更新した状態になる。

DOM に依存する操作が可能になるが、ほぼ無限ループに陥る可能性(変更→更新→変更→更新…)

があるので取り扱いには注意が必要

beforeDestroy

Vue インスタンスが破棄される直前に呼ばれる。

この段階ではインスタンスはまだ完全に機能している。

ここでは主にイベントリスナの破棄やタイマーの初期化など後処理をする場合に使う(メモリリークの原因になるため)

もし後処理を行わないとタイマーがずっと動き続けてしまうなどの現象が起こる

destroyed

Vue インスタンスが破棄された後に呼ばれる。

全てのイベントリスナは削除されており、そして全ての子の Vue インスタンスは破棄されている。