LoginSignup
206
170

More than 5 years have passed since last update.

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

Last updated at Posted at 2017-10-16

この辺の話
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

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

206
170
3

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
206
170