VueのLifeCycleっていうのは？？？
2022.10.19
初めに
こんにちは！
皆さん久しぶりです！
最近は夏が終わった気がしますね。風邪に気をつけてください。
今回のテーマは「vue.jsのライフサイクル」です！！！
よろしくお願いいたします。
Vue.jsっていうのは？
Vue.jsはフロントエンド開発を楽にするため、reactと共に大衆的なオープンソースjavascriptフレームワークです。
ざっくりVue.jsの長所を紹介します！
- Learning Curveが低い
- React、Angularに比べて、軽い＆早い
- React（Virtual DOM）、Angular（データバインディング）の長所を持っている
- Component基盤のフレームワークで、ブロックのようにComponentの組み合わせで構成、コードの再利用率が高い
- Virtual DOM：画面に変化がある度にリアルタイムでDOMを修正せず、変更事項が反映されたVirtualDOMを利用してメモリで処理し、一度だけDOM修正を行う。結果的にブラウザは一回だけのレンダリングすることによって不要なレンダリング回数を減らしてレンダリング性能を高める
Vue - Life Cycle（ライフサイクル）
引用：https://jp.vuejs.org/v2/guide/instance.html
では、四つの段階で分けてみましょう！
Creation：Component初期化
Creationでは、ライフサイクルの中で最初に実行されるところです。
ここでは、ComponentがDOMに追加される前です。サーバーレンダリングでも対応しているところです。
なので、Clientの方とサーバーレンダリングの方で処理することがあれば、この段階で進めたらOKです！
ここでは、beforeCreateとCreateがあります。
beforeCreate：一番最初に実行されるhookです。まだ、dataとevents（vm、$el等）が設定されていないので、呼び出すとエラーになります。
1 2 3 4 5 6 7 8 9 10 11 12 13 | <script> export default { data () { return { test: null } }, beforeCreate () { // this.test → エラーになります。 } } </script> |
Create：dataとevents（vm）が設定されて、呼び出せます。（まだ、Virtual DomとMount、レンダリングは実装されてないです。）
1 2 3 4 5 6 7 8 9 10 11 12 | <script> export default { data () { return { test: 1 } }, created() { // this.test → 1 } } </script> |
Mounting：DOM合わせ
Mountingでは、初期レンダリング直前にComponentに処理の追加ができます。（サーバーレンダリングでは対応していません。）
初期レンダリングの前にDomを変更しようとしたら、この段階で使えますが、
Componentの初期に設定されるデータなら、created段階で行った方が良いとおみます。
beforeMount：templateとレンダリングFunctionがコンパイルされた後に、初レンダリングされる直前に実行されます。
1 2 3 4 5 6 7 | <script> export default { beforeMount() { // this.$el → エラー！まだです。 } } </script> |
Mounted：mountedでは、Component、template、レンダリングされたDOMに処理ができます（子Componentが全部Mountedされたとは言えません。）
1 2 3 4 5 6 7 | <script> export default { mounted() { // console.log(this.$el) → DOM要素OK！ } } </script> |
Mountedで、一番注意するところは「親Componentと子Componentの順番」です！
Createdは「親 → 子」順で実行されますが、
Mountedは「子 → 親」順で実行されます！（親ComponentのMountedは子ComponentのMountedが終わるまで待ってます！）
ここだけ、気をつけてください。
Updating：再レンダリング
Componentで使われてる値が変わったり、どんな理由で再レンダリングが発生したら、実行されます。
beforeUpdate：Componentのデータが変わって、Updateサイクルが始まる時実行される。DOMが再レンダリングされ、fetctされる前に実行される。
ここの変更で、再レンダリングはトリガーされないです。
Updated：Componentのデータが変わって、再レンダリングが行われた後に実行される。
DOMがUpdated完了の状態なので、DOM処理も可能です。（子Componentが全部Updatedされたとは言えません。）
1 2 3 4 5 6 7 8 9 | <script> export default { updated() { this.$nextTick(function() { // レンダリングされた後に実行される }) } } </script> |
Destruction：解体
beforeDestroy：Vueインスタンスが消える前に呼び出されます。Componentは元の機能を持ってます。eventListenerの削除等が可能です。サーバーレンダリングされる際に呼び出さないです。
destroyed：Vueインスタンスが消えた後に呼び出されます。Vueインスタンスの全バインディングが解体され、全eventListenerの削除等が可能です。全下位Vueインスタンスも削除されます。全サーバーレンダリングされる際に呼び出さないです。
最後に、、、
ここまでいかがでしょうか？
vueのライフサイクルを理解して置くと、今後vueの開発が楽になります！
それでは次の記事でお会いしましょう！
最後まで読んでいただき、ありがとうございました！🙇♂️
書いた人はこんな人
IT技術10月 31, 2023DRシステムって？- IT技術1月 20, 2023Prismaってなに？【前編】
- IT技術10月 19, 2022VueのLifeCycleっていうのは？？？
- ライトコードの日常8月 29, 2022YOUは何しにライトコードへ？〜イデさん編〜
関連記事
採用情報
\ あの有名サービスに参画!? /
バックエンドエンジニア
\ クリエイティブの最前線 /
フロントエンドエンジニア
\ 世界を変える…！ /
Androidエンジニア
\ みんなが使うアプリを創る /
iOSエンジニア
