ライフサイクルフックとは
他の方のポートフォリオを見ていると、mountedやcreatedなど、見知らぬ用語が頻出してちんぷんかんぷん。調べてみると、Vueにはライフサイクルフックなる概念があり、理解したいと思ったから学習する。
ライフサイクルフックとは
Vueが初期化されてから削除されるまでの一連の流れのこと。
new Vueから始まり、destroyで終わる。Vueの一生のこと。Vue.js公式に載っている図を見ると理解しやすい。
ざっくりした流れ
new Vue()を作成
↓
beforeCreateで、初期化前の処理を記入
↓
initで初期化される
↓
createdでAPIを叩いたり、ローディング画面を実装
↓
elによって指定された箇所があるかを識別
↓
elがない場合、mount関数が実行される
↓
template部分があるかを識別し、renderとくっつける
or
templateがない場合、elオプションで定義されたDOMをtemplateとしてコンパイルする。
↓
mountでインスタンスのelement(vm.$el)を作成し、elオプションに置換する
主要項目の説明
new Vue()
vueの初期化を行う処理。
主に、hello_vue.jsのようなメインファイルに記述することで、virtual DOMの構築をする。下記のように書く。
import Vue from 'vue'
import App from '../app.vue'
document.addEventListener('DOMContentLoaded', () => {
const app = new Vue({
router,
render: h => h(App)
}).$mount()
document.body.appendChild(app.$el)
})
created
初期化の後に実行される。
APIを呼んでサーバなどからのデータ取得処理を書くことが多い
- インスタンスの初期化が済んで props や computed にアクセスできる
- DOMにはアクセスできない
( 参考文献: https://www.kimullaa.com/entry/2019/12/01/132724)
使用例
new Vue({
data: {
a: 1
},
created: function () {
// `this` は vm インスタンスを指します
console.log('a is: ' + this.a)
}
})
// => "a is: 1"
mounted
VueインスタンスとDOMが紐付けされる。
this.$elによってDOMが作成される。createdだとまだDOMにはアクセスできないが、mountedの段階だとアクセスすることができる。
https://qiita.com/kaorina/items/bb261a119b9f02e02c2d
https://greko-engineer.hateblo.jp/entry/2019/12/21/183509
createdとmountedの違い
createdはDOMがまだ作られていない状態で、mountedではDOMが作成された直後の状態です。
頭に画像をイメージしながら実装できると、scriptが描きやすそう。
el
el: '#app'は、documentElementById('app')というDOM操作をしているのと同義
基本形
#appの中のデータを操作する。
var app = new Vue({
el: '#app',
data: {
},
})
実際に使ってみる
<body>
<div id="app">
<button v-on:click="emargeEl">Push Here</button>
</div>
<script src="<https://cdn.jsdelivr.net/npm/vue/dist/vue.js>"></script>
<script>
new Vue({
el: '#app',
data: {
},
methods:{
emargeEl : function(){
console.log(this.$el.innerHTML = "<h1>Good Night World</h1>")
}
}
})
</script>
</body>
- v-on:click="emargeEl"は、クリックしたらemargeElメソッドが実行されることを指している。
- console.log(this.$el.innerHTML = "<h1>Good Night World</h1>")で指定した箇所のHTMLを<h1>Good Night World</h1>に変更している。this.$elは#appを指している。