#ライフサイクルとは
難しい言葉に聞こえてますよね。私も横文字が苦手なので、学生の頃は世界史が苦手でした。
そんな私的な解釈でいうと、ライフサイクルとはVueアプリケーションが作成されるまでの過程のことだと解釈しています。
例えば人間でも傷をした時、治るまでには血液がこれ以上流れないように固まっていき、やがてかさぶたになり、最終的に元の皮膚と変わらないくらいまでに治るという、人間の素晴らしい機能の連鎖によって新しい皮膚が作られます。
Vueもいろんな機能の連鎖によって、新しくアプリケーションが作られるのですが、その過程ごとにできることが異なります。
そして、その過程の中のフェーズやそのタイミングによってできることを、ライフサイクルフックといいます。
今回は、それらの違いをみていく記事になります。
#Vue.jsのライフサイクルフック一覧
| フック名 | フックが呼ばれるタイミング | アクセス可能 | アクセス不可能 |
|---|---|---|---|
| beforeCreate | インスタンスが生成され、データが初期化される前 | ||
| created | インスタンスが生成され、データが初期化された後 | メソッド、プロパティ | エレメント |
| beforeMount | インスタンスが、DOM要素にマウントされる前 | ||
| mounted | インスタンスが、DOM要素にマウントされた後 | メソッド、プロパティ、エレメント | |
| beforeUpdate | データが変更され、DOMに適用される前 | ||
| updated | データが変更され、DOMに適用された後 | ||
| beforeDestroy | Vueインスタンスが破棄される前 | ||
| destroyed | Vueインスタンスが破棄された後 |
※随時、アクセス可能なことなど追記していきます
#メソッドの値やエレメントの存在による、フックタイミングの比較
###ページロード完了時
<body>
<div id="app">
<h1>Hello, world</h1>
<button v-on:click="showEl">show!!</button>
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'Hello world'
},
methods: {
showEl: function () {
this.message = 'Good night'
console.log(this.message)
console.log(this.$el)
}
}
})
</script>
</body>
// this.messageの中身
Good night
// this.$elの中身
<div id="app">
<h1>Hello, world</h1>
<button>show!!</button>
</div>
###beforeCreate時
<body>
<div id="app">
<h1>Hello, world</h1>
<button v-on:click="showEl">show!!</button>
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'Hello world'
},
beforeCreate: {
showEl: function () {
this.message = 'Good night'
console.log(this.message)
console.log(this.$el)
}
}
})
</script>
</body>
// this.messageの中身
Hello world
// this.$elの中身
undefined
###created時
<body>
<div id="app">
<h1>Hello, world</h1>
<button v-on:click="showEl">show!!</button>
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'Hello world'
},
created: {
showEl: function () {
this.message = 'Good night'
console.log(this.message)
console.log(this.$el)
}
}
})
</script>
</body>
// this.messageの中身
Good night
// this.$elの中身
undefined
###mounted時
<body>
<div id="app">
<h1>Hello, world</h1>
<button v-on:click="showEl">show!!</button>
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'Hello world'
},
mounted: {
showEl: function () {
this.message = 'Good night'
console.log(this.message)
console.log(this.$el)
}
}
})
</script>
</body>
// this.messageの中身
Good night
// this.$elの中身
<div id="app">
<h1>Hello, world</h1>
<button>show!!</button>
</div>
#番外編：Nuxt.jsのフック
| フック名 | フックが呼ばれるタイミング | 記述内容 | Vueインスタンスのdata |
|---|---|---|---|
| asyncData | ページがロードされる前 | APIの呼び出しなどの非同期通信 | dataとマージする |
| fetch | ページがロードされる前 | APIの呼び出しなどの非同期通信 | dataとマージしない |