JavaScript
vue.js

Vue.jsのライフサイクルメモ

More than 1 year has passed since last update.

この辺の話

https://jp.vuejs.org/v2/guide/instance.html#ライフサイクルダイアグラム

今の所、createdとmountedぐらいしか使ったことがないが、

予め知っておくと他のライフサイクル関数も使い所が分かってくるかもしれない


beforeCreate

インスタンスが初期化されるときに同期的に呼ばれる


created

インスタンスが作成された後に同期的に呼ばれる

データの監視とイベントの初期セットアップが完了した状態

サーバーサイドからのデータ取得処理はここで行うのが良さそう

createdまでがサーバサイドとクライアントサイドの両方で呼ばれ、

beforeMount以降はクライアントサイドのみで呼ばれる


beforeMount

インスタンスがマウントされる前に呼ばれる

templateオプションがrender関数にコンパイルされた後に実行される

(templateオプションが無い場合は、elで指定したouterHTMLをコンパイルする)


mounted

インスタンスがマウントされた後に呼ばれる

DOM要素にアクセスできるようになる(this.$el)


beforeUpdate

状態を更新し、Virtual DOMが再描画される前に呼ばれる

つまり、beforeUpdate内で状態を取得すると更新後の値になっている


updated

状態を更新し、Virtual DOMが再描画される後に呼ばれる

状態変更後のDOM要素にアクセスする場合は、updated内で取得すると良い

ただし、updated内で状態を更新すると無限ループに陥る可能性がある

(状態を更新してループを抜ける条件をちゃんと実装しておく必要がある)


beforeDestroy

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

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


destroyed

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