【Vue.js】 ライフサイクルフック

はじめに

ライフサイクルフックはVueのオプションオブジェクトの１つ。Vueインスタンスの生成から破棄までの間の特定のタイミングで実行されるメソッド（関数）をライフサイクルフックという。ライフサイクルフックはコンポーネントごとに存在する。

ライフサイクルフック一覧

dataオプションやmethodsオプションは自由に定義できるが、ライフサイクルフックは使用できるメソッドがあらかじめ決まっており、以下のようなタイミングでメソッドが実行される。

ライフサイクルフック	タイミング
beforeCreate	インスタンス生成時。リアクティブデータが作成される前。
created	インスタンス生成後。リアクティブデータが作成された後。
beforeMount	インスタンスがDOM（HTML）にマウントされる前。DOMの操作はできない。
mounted	インスタンスがDOM（HTML）にマウントされた後。DOMの操作ができる。
beforeUpdate	データが更新され、DOMが更新される前。
updated	データが更新され、DOMが更新された後。
beforeDestroy	インスタンスが破棄される前。
destroyed	インスタンスが破棄された後。
errorCaptured	任意の子孫コンポーネントからエラーが捕捉された時。

※リアクティブデータ・・・オプションで定義されているデータ。定義しているデータが更新されるとHTML側も自動的に更新される。変更が瞬時に反映されるデータ。

基本的な書き方

sample.js

new Vue({
  el: 'app',
  ライフサイクルのメソッド名: function() {
    ここに処理をかく
  } 
})

beforeCreate

sample.js

new Vue({
  el: 'app',
  data: {
    message: 'Hello',
  },
  // インスタンスが生成され、処理が実行される
  beforeCreate: function() {
    // リアクティブデータはまだ生成されていないのでmessageは参照できない
    // コンソールには何も出力されない
    console.log(this.message)
  }
})

created

sample.js

new Vue({
  el: 'app',
  data: {
    message: 'Hello',
  },
  // インスタンスが生成された後、処理が実行される
  created: function() {
    // コンソールにHelloと出力される
    console.log(this.message)
  }
})

beforeMount

sample.vue

<template>
  <!-- まだマウントされていないのでmessageの中は空のまま -->
  <div id="app">{{ message }}</div>
</template>
<script>
new Vue({
  el: 'app',
  data: {
    message: '',
  },
  // マウントされる前に処理が実行される
  beforeMount: function() {
    // messageにHelloを代入
    this.message = 'Hello'
  }
})
</script>

mounted

sample.vue

<template>
  <!-- Helloが表示される -->
  <div id="app">{{ message }}</div>
</template>
<script>
new Vue({
  el: 'app',
  data: {
    message: '',
  },
  // マウントされた後に処理が実行される
  mounted: function() {
    // messageにHelloを代入
    this.message = 'Hello'
  }
})
</script>

ライフサイクルの流れとメソッド実行のタイミングを表した図↓