Help us understand the problem. What is going on with this article?

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

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

kurosame
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした