VueJsのライフサイクルフック

こんにちは。KOUKIです。

本記事は、VueJSのライフサイクルフックのメモです。

ライフサイクルフック

ライフサイクルフックとは、VueJSのアプリ起動時に特定の段階で自動的に実行してくれる関数を指します。

以下、公式サイトより。

関数名 意味
beforeCreate データの監視とイベント/ウォッチャのセットアップより前の、インスタンスが初期化されるときに同期的に呼ばれる。new Vue直後っぽい。
created インスタンスが作成された後に同期的に呼ばれる。この段階では、インスタンスは、データ監視、算出プロパティ、メソッド、watch/event コールバックらのオプションのセットアップ処理が完了したことを意味する。しかし、マウンティングの段階は未開始で、$elプロパティはまだ利用できない。
beforeMount render 関数が初めて呼び出されようと、マウンティングが開始される直前に呼ばれる。仮想DOMの段階。
mounted DOMへ仮想DOM($el)を突っ込む。新たに作成される vm.$el によって置き換えられるelに対して、インスタンスがマウントされたちょうど後に呼ばれる。ルートインスタンスがドキュメントの中の要素にマウントされる場合、vm.$el も mounted が呼び出されるときにドキュメントの中に入る。
beforeUpdate データが変更されるとき、DOM が適用される前に呼ばれる。これは、更新前に既存の DOM にアクセスするのに適している。
updated データが変更後、仮想 DOM が再描画そしてパッチを適用によって呼ばれる。このフックが呼び出されるとき、コンポーネントのDOMは更新した状態になり、このフックでDOMに依存する操作を行うことができる。しかしがながら、ほとんどの場合、無限更新ループに陥る可能性があるため、このフックでは状態を変更するのを回避すべき。
beforeDestroy Vueインスタンスが破棄される直前に呼ばれる。この段階ではインスタンスはまだ完全に機能している。尚、このフックはサーバサイドレンダリングでは呼ばれない。
destroyed Vueインスタンスが破棄された後に呼ばれる。このフックが呼ばれるとき、Vue インスタンスの全てのディレクティブはバウンドしておらず、全てのイベントリスナは削除されており、そして全ての子の Vue インスタンスは破棄される。

公式ページにライフサイクルフックのダイアグラムがありました。

これを見ればスッキリすると思います。

VueJSの公式サイトより

サンプル

JSFIDDLEでサンプルコードを展開しています。

ChromeかつF12でデベロッパーツールを開いていただいて、コンソールに出力される値を確認してください。

ボタンを押下すると、他のライフサイクルフックが発動します。

おわりに

VueJSも勉強していくと面白い機能がたくさんあります。一つ一つ理解して、アプリケーションを作っていきたいですね。

関連記事

参考書籍