Edited at

Vueのライフサイクルを完全に理解した


Vueのライフサイクルについて

今回はVueのライフサイクルについて説明したいと思います。

Vueのライフサイクルは以下のようになっております

https://jp.vuejs.org/v2/guide/instance.html#ライフサイクルダイアグラム

このようにVueではインスタンスが作られてから、削除されるまでの間で、ライフサイクルフックを実行することができます。

ここでは、インスタンスのライフサイクルごとに説明したいと思います。


インスタンス作成時

インスタンス作成時には以下の2つのフックを実行されます


beforeCreate


beforeCreate.vue

<script>

new Vue({
data(){
return{
hoge:"a"
}
},
beforeCreate () {
console.log('hoge is: ' + this.hoge)
}
})
</script>
// ->何も表示されない

これはインスタンスの生成前に実行できます

このタイミングでは、インスタンスは初期化前ですので、data()は呼ばれていません


created


created.vue

<script>

new Vue({
data(){
return{
hoge:"a"
}
},
created () {
console.log('hoge is: ' + this.hoge)
}
})
</script>
// ->hoge is: a

これはインスタンスが作成された後で実行されます

個人的にはcreatedは一番使っている印象です!!

注意として、elementプロパティはまだここでは呼ばれていません


マウント時

インスタンスが作成された後は、elementへのマウントがされます


beforeMount

これは、インスタンスが作成された後、elementへのマウントされる前で実行されます


beforeMount.vue

<template>

<div id="app">現在{{hoge}}です</div>
</template>
<script>
new Vue({
data(){
return{
hoge:""
},
 el:"app"
},
beforeMount() {
this.hoge = "beforeMount"
}
})
</script>
// ->表示されません


mounted

これは、elementへのマウントがされた後に実行されます

よく、createdとの違いがわからないと言う意見が見られますが、

mountedは、elementへのマウントが行われた後処理されます。

したがって、elでelementを指定している場合、createdではタイミングとして早いと言うことになります。

また、mountedはSSRの場合は使えないので注意が必要です


mounted.vue

<template>

<div id="app">現在{{hoge}}です</div>
</template>
<script>
new Vue({
data(){
return{
hoge:""
},
 el:"app"
},
beforeMount() {
this.hoge = "mounted"
}
})
</script>
// ->現在mountedです

mountedでは子コンポーネント全てをマウントしたことは保証しません。

したがって全てのコンポーネントがマウントされるまでロードを待つには以下のようにする必要があります


mounted.vue

<script>

....
mounted() {
this.$nextTick(function () {
// ビュー全体がレンダリングされた後にのみ実行されるコード
})
}
....
</script>


データの更新時

データの更新時にはrerenderされるため、この前後でフックを実行することができます。


beforeUpdate

データの更新があった時に、rerenderされる前に実行されます。

更新前の既存のDOMに対してアクセスすることができます。

また、beforeUpdateはSSRの場合は使えないので注意が必要です


updated

データの更新があった時に、rerenderされた後に実行されます

このフックでは、状態変化を行うような処理は推奨されていません。

なぜならばそれが原因で無限ループに入ってしまう可能性があるからです。

updatedもmounted同様、子コンポーネントを全て再描画することを保証はしていないので、

mounted同様$nextTickを使うことを推奨されています。

また、updatedはSSRの場合は使えないので注意が必要です


インスタンスの削除時

インスタンスの削除($destroy())が呼ばれた時にこの前後でフックを実行することができます。


beforeDestroy

$destroy()が呼ばれた後、インスタンスが削除される前に実行されます

また、beforeDestroyはSSRの場合は使えないので注意が必要です


destoryed

$destroy()が呼ばれた後、インスタンスが削除された後に実行されます

また、destoryedはSSRの場合は使えないので注意が必要です


エラー時


errorCaptured

このフックはversion2.5.0以降で使用することができます

このフックは、任意の子孫コンポーネントからのエラーが捕捉された時に、呼び出されます。

フックは、エラー、エラーをトリガーするコンポーネントのインスタンス、エラーが捕捉されたかどうかのメッセージを受け取ることができます。

また、エラー伝播を防ぐ為に、falseにすることで任意の箇所以降に広まらないようにすることも可能です


最後に

これらのタイミングを理解することで「なんで期待通りに動かないの!」と言うようなことが減っていくと思います!!

これであなたもVueのライフサイクルを完全に理解しましたね笑