「Vue.js」の「ライフサイクルフック」の仕組みを学ぶ
今回は「Vueインスタンス」の生成から破棄までの過程と「ライフサイクルフック」について学んでいきたいと思います。
そろそろ本格的な内容の学習に入ってきたという雰囲気を感じています。
さらに内容が難しくなることも予想されるところですが、内容を理解することを優先して学習を進めていきたいと思います。
「ライフサイクルフック」の種類
「Vueインスタンス」の「ライフサイクルフック」には、
- beforeCreate
- created
- beforeMount
- mounted
- beforeUpdate
- updated
- beforeUnmount
- unmounted
があります。
全体の「ライフサイクルの流れ」は下図のようになります。
これからそれぞれのライフサイクルについて学んでいきたいと思います。
インスタンス生成
「インスタンス生成」に関する「ライフサイクルフック」について見ていきたいと思います。
ライフサイクルは下図のようになっていました。
「インスタンス生成」に関する「ライフサイクルフック」には下記のようなものがあります。
- beforeCreate
- 「Vueインスタンス」が初期化されてインスタンスが生成される前に実行されます。
- created
- 「Vueインスタンス」が生成された後に実行されます。
マウント
「マウント」に関する「ライフサイクルフック」について見ていきたいと思います。
ライフサイクルは下図のようになっていました。
「マウント」に関する「ライフサイクルフック」には下記のようなものがあります。
- beforeMount
- 「Vueインスタンス」が「マウント」される前に実行されます。
- mounted
- 「Vueインスタンス」が「マウント」された後に実行されます。
データ更新
「データ更新」に関する「ライフサイクルフック」について見ていきたいと思います。
ライフサイクルは下図のようになっていました。
「マウント」に関する「ライフサイクルフック」には下記のようなものがあります。
- beforeUpdate
- データ変更時の「Virtual DOM」の処理前に実行されます。
- update
- データ変更後に「再レンダリング」された後に実行されます。
アンマウント
「アンマウント」に関する「ライフサイクルフック」について見ていきたいと思います。
ライフサイクルは下図のようになっていました。
「アンマウント」に関する「ライフサイクルフック」には下記のようなものがあります。
- beforeUnmount
- 「Vueインスタンス」が「アンマウント」される前に実行されます。
- unmounted
- 「Vueインスタンス」が「アンマウント」された後に実行されます。
具体的にこれらの「ライフサイクルフック」が使われるのかまだ具体的にイメージができませんが、どのようなタイミングで「ライフサイクルフック」が設定されているのかは少しずつ覚えていきたいと思います。