Vue

【Vue.js 2.9】はじめてのVue.js ライフサイクルフックについて

  /

・ライフサイクルフックの紹介
・各処理のタイミングについて

はじめに

今回はライフサイクルフックについてです。
Vue.jsにはインスタンス生成から破棄の間に実行される関数がありそれらを総じてライフサイクルフックと呼ばれます。

ライフサイクルフックに該当する関数名とそれらの実行順序について紹介します。

【Vue.js 2.9】はじめてのVue.js プロジェクト作成からWelcomeページの表示 ・はじめてVue.jsを使う場合のやり方・Welcomeページを表示するまで紹介 はじめに Vue.jsの学習がここから始...

環境情報

名前詳細
Vue.js開発バージョン（https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js）
エディタJSFiddle（https://jsfiddle.net/）

ライフサイクルフック対象の関数名

現在、ライフサイクルフックには8つの関数名が存在します。
一見すると多く感じますが、「create」、「Mount」、「update」、「destroy」の4つのイベントに対してbeforeとafterの位置に関数が存在しています。

  1. beforeCreate
  2. created
  3. beforeMount
  4. mounted
  5. beforeUpdate
  6. updated
  7. beforeDestroy
  8. destroyed

各ライフサイクルフックの紹介

Create（beforeCreate・created）

Createはインスタンス初期化前後に実行されます。
インスタンスの初期化とは、newによるインスタンス生成される前です。
下記サンプルのbeforeCreateはインスタンス生成前のため、dataは作成されずtest変数も作られず「undefined」が返却されます。

Createdはインスタンス生成後のため、dataも作成されているためtest変数の値が出力されます。

var app = new Vue({
    el: '#app',
    data: {
    	test: 1
    },
    beforeCreate(){
    	console.log('beforeCreated : ' + this.test);
    },
    created(){
    	console.log('created : ' + this.test);
    }
})

Mount（beforeMount・mounted）

Mountはelement(el）へのマウント前後を指します。マウントが終わってからDOM操作が可能となります。
下記サンプルでは「ref=’test’」を取得していますが、beforeMountでは取得出来ず、Mountedで取得出来ます。


  <div id="app">
    <p ref="test">
      TEST:{{test}}
    </p>
  </div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
var app = new Vue({
    el: '#app',
    data: {
    	test: 1
    },
    beforeMount(){
    	this.test = 20
    	console.log('beforeMount : ' + this.$refs.test)
    },
    mounted(){
    	this.test = 30
    	console.log('mounted : ' + this.$refs.test);
    }
})

Update（beforeUpdate・updated）

Updateはデータ更新時の再描画前後を指します。
下記サンプルでは10秒ごとにtest変数をカウントアップしています。
カウントアップ後に再描画が行われDOMの値をログに出力しています。
beforeUpdateではカウントアップ前の値が出力され、updatedではカウントアップ後の再描画された値で出力されています。

注意として、updated内で変数を変える処理を行うと描画の無限ループが行われます。

  <div id="app">
    <p ref="test">
      TEST:{{test}}
    </p>
  </div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
var app = new Vue({
    el: '#app',
    data: {
    	test: 1
    },
    created() {
      setInterval(() => {
        this.test++
      }, 10000)
    },
    beforeUpdate(){
    	console.log('beforeUpdate : ' + this.$refs.test.textContent)
    },
    updated(){
    	console.log('updated : ' + this.$refs.test.textContent);
    }
})

Destroy（beforeDestroy・destroyed）

Destroyはインスタンス破棄の前後を指します。
インスタンス破棄とは、ページ遷移のときなどです。

メモリリーク対策としての手段ですがJavaScriptはガベージコレクションを採用しているため最初から意識する必要無く出来上がっていく中で意識するものと考えています。

参考記事

インスタンスライフサイクルフック
https://jp.vuejs.org/v2/guide/instance.html#インスタンスライフサイクルフック

RELATED POST