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 インスタンスが作成された後に実行される。データは初期化されているが、マウンティング前なので$elは利用できない。
beforeMount インスタンスがDOM要素にマウントされる前に実行される。
mounted インスタンスがDOM要素にマウントされた後に実行される。
beforeUpdate DOM更新前に実行される。データは更新済み。
updated DOM更新後に実行される。データは更新済み。
beforeDestroy インスタンスが破棄される前に実行される。
destroyed インスタンスが破棄された後に実行される。

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

参考サイト

このエントリーをはてなブックマークに追加

関連記事

コメントを残す

メールアドレスが公開されることはありません。
* が付いている欄は必須項目です

CAPTCHA


コメントが承認されるまで時間がかかります。

2021年10月
 12
3456789
10111213141516
17181920212223
24252627282930
31