はじめに
Vueが他のフレームワークより優れている点で挙げられることとして、直感的でわかりやすい。ハードルが低い。ということがよく挙げられる。
しかし、そんな中でも初学者が二番目(一番目はprops, event)につまづく大きな壁はライフサイクルだと思っている。
ここを理解していないと、ページの読み込み速度に影響が出たり、なぜか動かないんです(泣)ということになりかねないため、ちゃんと理解しておきたい。
特にAPIを呼ぶタイミングをどこにすればいいかで詰まったり、なんとなくcreated, mountedにしている人もいるかと思うため、そこに関しても書いていく。
※ できるだけ簡単に説明したいので、updatedあたりは割愛する。
前提
- propsやemitの壁は乗り越えている
- 業務である程度Vueをかけるくらい
- ライフサイクルフックを何度かみてなんとなくは理解している
- 単一ファイルコンポーネントであること
結論
「え、もう結論ですか？？」by 細井龍 from 令和の虎
「あ、ちょっと早いですかね」 by 最強の営業の人 from 令和の虎
はい、結論としてはAPIのレスポンスをどのようにして扱うかによって、createdで呼ぶかmountedで呼ぶかは変わってくると思っている。
APIのレスポンスがDOMで使われる場合
→ mounted
その他
→ created
詳細について以降で説明する。
ライフサイクルフック
Vueではインスタンスが作成されてからそのインスタンスが破壊されるまでの一つ一つのタイミングで、処理を行うことができる。
各サイクル毎に、before afterと前後のタイミングがある。
全体像を見てもわからないため、Qiitaを確認していると思うが、公式のものを念の為載せておく。
Vueのコンポーネントを表示する時には、データなどが出来上がってから実際にブラウザに表示されるDOMが形成されるという流れになっている。
- BeforeCreate
- created
- beforeMount
- mounted
- (beforeUpdate)更新が走る場合
- (updated)更新が走る場合
- beforeDestroy
- destroyed
ここでいうVueインスタンス
≒ 内部のスクリプト(正確にはちょっと違うがここで昔理解できずに詰まったため)
beforeCreate
- インスタンスが初期化(create)され、存在している
- data()やcomputed()やwatch()などは存在していない(機能、認識されていない)
created
- インスタンスは既にcreateされている状態
- まだDOM(内部)にはアクセスできない
- data()やcomputed()やwatch()が機能する。
-
APIレスポンスをDOMに利用せずdataに入れたいだけなら、API通信を始める最高のタイミングb
→ beforeCreatedではdataが機能していないので早すぎる。
→ API通信はものによってはかなり時間がかかるためできるだけ早いタイミングで行いたい。
// APIのレスポンスをdataに格納
this.response = res
このようにするのであればこのタイミングがベスト
beforeMount
- まだDOM(内部)にはアクセスできない
mounted
- mountが行われた。
→ つまりDOM(内部)にdata()内のデータが下記のように反映された
<template>
...
// これまではこれが表示されない状態だったが、ついに表示される！
{{ message }}
...
</template>
<script>
...
data() {
return() {
message: 'yeah!!!'
}
}
...
-
APIレスポンスをDOMに利用するなら、API通信を始める最高のタイミングb
→ createdではレスポンスをdataに入れたところでDOMに反映させることができなかったが、このタイミングでは可能であるため、このタイミングでレスポンスをdataに入れ、DOMに反映させる。
beforeDestroy
- この時には既に、data()やcomputed()やwatch()が破壊されており、アクセスすることができない
- 細かい話をすると、メモリリーク(1)を防ぐため、もしサードパーティーのライブラリのインスタンスを作成している場合は手動で削除する必要がある。
→ Vueインスタンスは自動で削除されるが、サードパーティのものは自動で削除されないため、永遠にメモリを使うことになり、メモリ不足に陥る可能性がある
PowerGraphというライブラリを利用してインスタンスを作成する場合
mounted() {
this.chart = new PowerGraph();
}
beforeDestroy() {
this.chart.destroy();
}
destroyed
- 全てが破壊された後の話、、、、
- Vue インスタンスの後始末を行う
まとめ
できるだけ全体の流れが分かりやすく理解できるようにupdated等は省略させていただいた。
今回のまとめとしては
- API通信はcreatedかmountedで行うのが良さそう。レスポンスの扱い方次第
- タイミングによって、利用できるデータが変わったりするため、ちゃんとライフサイクルを理解することはかなり重要
注釈
- a memory leak is a type of resource leak that occurs when a computer program incorrectly manages memory allocations[1] in a way that memory which is no longer needed is not released
参考