Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
171
Help us understand the problem. What is going on with this article?
@kurosame

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

More than 3 years have 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

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

171
Help us understand the problem. What is going on with this article?
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
kurosame
フロントエンドが得意です

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
171
Help us understand the problem. What is going on with this article?