Vue.jsのライフサイクルフックを確認する

Vue.jsのライフサイクルフックについて確認してみます。

サンプルコード

データの更新とインスタンス破棄の動作確認用にボタンを追加します。

<div id="app">
  {{ counter }}
  <button v-on:click="update">Add 1</button>
  <button v-on:click="destroy">破棄</button>
</div>

各フックを設定して、実行されるタイミングなどを確認してみます。

var app = new Vue({
  el: '#app',
  data: {
    counter: 0
  },
  methods: {
    // beforeUpdate・updated 確認用
    update: function() {
      this.counter += 1;
    },
    // beforeDestroy・destroyed 確認用
    destroy: function() {
      this.$destroy();
    }
  },

  // インスタンスが初期化されるときに実行。データは初期化される前。
  beforeCreate: function() {
    console.group('beforeCreate');
    console.log(this.$data);
    console.log(this.$el);
    console.groupEnd();
  },

  // インスタンスが作成された後に実行。データは初期化された後。
  created: function() {
    console.group('created');
    console.log(this.$data);
    console.log(this.$el);
    console.groupEnd();
  },

  // インスタンスがDOM要素にマウントされる前に実行。
  beforeMount: function() {
    console.group('beforeMount');
    console.log(this.$data);
    console.log(this.$el);
    console.groupEnd();
  },

  // インスタンスがDOM要素にマウントされた後に実行。
  mounted: function() {
    console.group('mounted');
    console.log(this.$data);
    console.log(this.$el);
    console.groupEnd();
  },

  // DOM更新前に実行。データは更新済み。
  beforeUpdate: function() {
    console.group('beforeUpdate');
    console.log(this.$data.counter);
    console.log(this.$el);
    console.groupEnd();
  },

  // DOM更新後に実行。データは更新済み。
  updated: function() {
    console.group('updated');
    console.log(this.$data.counter);
    console.log(this.$el);
    console.groupEnd();
  },

  // インスタンスが破棄される前に実行。
  beforeDestroy: function() {
    console.group('beforeDestroy');
    console.groupEnd();
  },

  // インスタンスが破棄された後に実行。
  destroyed: function() {
    console.group('destroyed');
    console.groupEnd();
  }
});

ライフサイクルフックのデモページ
コメントでも記載していますが、各フックの内容は以下の通りです。

実行されるタイミングは beforeCreate　→ created　→ beforeMount　→ mounted の順で、データの更新があった場合には beforeUpdate　→ updated　の順で実行、インスタンスが破棄された場合は beforeDestroy　→ destroyed の順で実行されます。
ライフサイクルの流れに関しては、公式サイトの図がわかりやすいです。