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 インスタンスは破棄されている。