最近、Vue.jsばっかりいじっている山元です。
勉強し直しているのですが、覚えていないことがたくさんなのでメモがてら書いていきます！
今日はインスタンスのライフサイクルについて。
new Vueが実行されてからDOMに描画されるまでの流れをまとめます！
ライフサイクルについては公式にも説明ありますのでこちらも参照ください。
また、各ライフサイクルフックの詳細はAPI一覧で確認が可能です。
Vue.js | API
主なライフサイクルフック
Vueのインスタンスは、new Vueした時に一連の初期化を行う。
その中で特定のタイミングで関数を実行します。
その関数を「ライフサイクルフック」といいます。
ライフサイクルフックの種類
- beforeCreate
- created
- beforeMount
- mounted
- beforeUpdate
- updated
- beforeDestroy
- destroyed
各ライフサイクルフックの特徴
beforeCreate
- まだインスタンスはできていない
- thisとか使えない
- この処理が終わってインスタンスが作られる
created
- インスタンスができた直後に走る
- データがリアクティブになる
- つまりthisとか使える
createdの後はelプロパティがあるかどうかで変わる
el有 → templateをrender関数にコンパイル
el無 → $mount()が呼ばれてからtemplateをrender関数にコンパイルする。
beforeMount
- 実際にDOMへ追加される直前に発火
mounted
- 実際にDOMへ追加されてから発火
beforeUpdate
- データが変わって、DOMへ再描画される前に発火
updated
- beforeUpdate後にDOMの再描画が終わってから発火
beforeDestroy
- インスタンス破棄の直前に発火
- まだ、インスタンスとしては機能する
destroyed
- インスタンスが破棄された後に発火
- リアクティブではなくなります
いっぱいあって大変ですが、名前がわかりやすい分、流れは覚えやすいと感じました。
あと、使われどころを想像するとより覚えやすいのかなって思いました。
たとえば「beforeCreate」とかは、axiosなどと組み合わせてインスタンスの生成前にAPI取ってくるとか。
※余談ですが「axios」ってなんて読むのが正解ですか？？笑
まだまだ、学ぶことはいっぱいですがとりあえずなんか作って見ようと思います！