Vue.jsのインスタンスライフサイクルおよびライフサイクルフックの概要(学習記録)。
ライフサイクルフックとは...
Vue.jsには、インスタンスの生成から破棄までの間に実行される関数がいくつか存在する。これらの関数をライフサイクルフックと呼ぶ。
ライフサイクル
Vueインスタンスが生成されてから破棄されるまでの流れ
1.生成・初期化
-
Vueインスタンス生成後に初期化処理を行う。 - リアクティブデータ(
data)の初期化-
dataの更新が画面の表示と同期されるようになる。 - 対応関数:
beforeCreate,created
-
2.マウント
- コンポーネントをDOMにマウント(VueインスタンスとDOMが紐付け)する。
-
Vueインスタンスがelオプションが指定されているかを確認する。- 指定がある場合：次のフェーズへ移行する。
- 指定がない場合：
mount関数が実行されたタイミングで、次のフェーズに移行する。
-
templateオプションを持っているかを確認。- 持っている場合：
templateがrender関数にコンパイルされる。 - 持っていない場合：
elオプションで定義されたDOMをtemplateとしてコンパイルする。
- 持っている場合：
- マウント(インスタンスの
elementを作成し、elオプションに置換)する。 - 対応関数:
beforeMount,mounted
3.データ/画面の更新
- 画面が表示されている状態。
- データが変更されると、
render関数が実行され再描画が行われる。 - 対応関数:
beforeUpdate,updated
4.インスタンスの破棄
- インスタンスは画面遷移などで描画されなくなるタイミングで破棄される。
- 対応関数:
beforeDestroy,destroyed
beforeCreate
- インスタンスの初期化前に実行される。
- プロパティ
dataにアクセスしようとしても、undefinedとなる。
new Vue({
data: {
test: 1
},
beforeCreated() {
console.log('TEST: ' + this.test)
}
})
// => "TEST:undefined"
created
- インスタンスの初期化後に実行される。
- プロパティ
dataにアクセスすることができる。 - マウントに必要なデータを取得・設定する(APIを用いたデータ取得処理、DOMへのマウントが完了して画面が描画されるまでのローディング表示など)時に使用する。
new Vue({
data: {
test: 1
},
created() {
console.log('TEST:' + this.test)
}
})
// => "TEST:1"
beforeMount
-
elementへのマウント前に実行される。 -
Vueのelementに置き換わる前のelement要素にアクセスする処理を書く。
<template>
<div id="app">TEST:{{test}}</div>
</template>
<script>
new Vue({
data(){
return{
test:""
},
},
beforeMount() {
this.test = "beforeMount"
}
})
</script>
/ => "TEST:"(表示されない)
mounted
-
elementへのマウント後に実行される。 -
templateにアクセスできるようになる。
<template>
<div id="app">TEST:{{test}}</div>
</template>
<script>
new Vue({
data(){
return{
test:""
},
},
mounted() {
this.test = "mounted"
}
})
</script>
beforeUpdate
- データ(プロパティ)更新時の再描画(
rerender)前に実行される。 - 再描画前のDOM要素の取得処理を書く。
- 更新後の値が取得される。
<template>
<div id="app">TEST:{{test}}</div>
</template>
<script>
new Vue({
data(){
return {
test:"test"
}
},
mounted(){
this.test = "mounted"
},
beforeUpdate(){
console.log("beforeUpdate:",this.test) // beforeUpdate:mounted
console.log(this.$el) // <div>TEST:mounted</div>
},
)};
</script>
updated
- データ更新時の再描画後に実行される。
- 再描画したDOMに対しての初期処理を書く。
-
updated内で状態更新処理を書くと無限ループになる可能性あり。
<template>
<div id="app">TEST:{{test}}</div>
</template>
<script>
export default {
data(){
return {
test:"test"
}
},
mounted(){
this.test = "mounted"
},
updated(){
console.log("updated", this.test) // updated:mounted
console.log(this.$el) // <div>TEST:mounted</div>
}
};
</script>
beforeDestroy
- インスタンスが破棄される前に実行される。
- ページ遷移をする際に、そのページのインスタンスは破棄される。
- インスタンス破棄前にクリアしなければいけない処理がある場合に使用する。
-
Vueインスタンスの要素に別のインスタンスを紐付けた場合など。
-
destroyed
- インスタンスが破棄された後に実行される。