ライフサイクルフックとは

他の方のポートフォリオを見ていると、mountedやcreatedなど、見知らぬ用語が頻出してちんぷんかんぷん。調べてみると、Vueにはライフサイクルフックなる概念があり、理解したいと思ったから学習する。

ライフサイクルフックとは

Vueが初期化されてから削除されるまでの一連の流れのこと。

new Vueから始まり、destroyで終わる。Vueの一生のこと。Vue.js公式に載っている図を見ると理解しやすい。f:id:subaru-hello:20211008165452p:plain

ざっくりした流れ

new Vue()を作成

beforeCreateで、初期化前の処理を記入

initで初期化される

createdでAPIを叩いたり、ローディング画面を実装

elによって指定された箇所があるかを識別

elがない場合、mount関数が実行される

template部分があるかを識別し、renderとくっつける

or

templateがない場合、elオプションで定義されたDOMをtemplateとしてコンパイルする。

mountでインスタンスのelement(vm.$el)を作成し、elオプションに置換する

 

(Vue インスタンス — Vue.js)

主要項目の説明

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"
  1. new VueでVueインスタンスを作成(以降vmで表現できる?)
  2. createdでdataにアクセス
  3. console.logでメソッドを実行

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>
  1. v-on:click="emargeEl"は、クリックしたらemargeElメソッドが実行されることを指している。
  2. console.log(this.$el.innerHTML = "<h1>Good Night World</h1>")で指定した箇所のHTMLを<h1>Good Night World</h1>に変更している。this.$elは#appを指している。

Image from Gyazo

Vue インスタンス - Vue.js

vue.jsのcreatedとmountedの違いを目で見て理解 | アールエフェクト