VueのLifeCycleっていうのは？？？

イデ（エンジニア）

2022.10.19

IT技術

Vue.js

初めに

こんにちは！
皆さん久しぶりです！

最近は夏が終わった気がしますね。風邪に気をつけてください。

今回のテーマは「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<script>
2    export default {
3        data () {
4            return {
5                test: null
6            }
7        },
8
9        beforeCreate () {
10            // this.test → エラーになります。
11        }
12    }
13</script>

Create：dataとevents（vm）が設定されて、呼び出せます。（まだ、Virtual DomとMount、レンダリングは実装されてないです。）

1<script>
2    export default {
3        data () {
4            return {
5                test: 1
6            }
7        },
8        created() {
9            // this.test → 1
10        }
11    }
12</script>

Mounting：DOM合わせ

Mountingでは、初期レンダリング直前にComponentに処理の追加ができます。（サーバーレンダリングでは対応していません。）

初期レンダリングの前にDomを変更しようとしたら、この段階で使えますが、
Componentの初期に設定されるデータなら、created段階で行った方が良いとおみます。

beforeMount：templateとレンダリングFunctionがコンパイルされた後に、初レンダリングされる直前に実行されます。

1<script>
2    export default {
3        beforeMount() {
4            // this.$el → エラー！まだです。
5        }
6    }
7</script>

Mounted：mountedでは、Component、template、レンダリングされたDOMに処理ができます（子Componentが全部Mountedされたとは言えません。）

1<script>
2    export default {
3        mounted() {
4            // console.log(this.$el) → DOM要素OK！
5        }
6    }
7</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<script>
2    export default {
3        updated() {
4            this.$nextTick(function() {
5                // レンダリングされた後に実行される
6            })
7        }
8    }
9</script>