Vue.js Vueオブジェクトのライフサイクル

目的地が設定できる手帳のような使い心地のTODOアプリを公開しています。

スポンサードリンク

Vueオブジェクトは以下のライフサイクルがあり、各ポイントに応じて処理を実行することができる。

beforeCreate : Vueインスタンスが作成される直前
created : インスタンスの作成が完了
beforeMount : element(el: "id")にマウントされる直前
mounted : elementにマウントが完了
beforeUpdate : インスタンスのデータに更新があった時に、rerenderされる直前。更新前のDOMにアクセス可能。
updated : インスタンスのデータに更新があった時に、rerenderされた後に実行されます。このライフサイクルで再びデータを変更するようなことをしてしまうと無限loopに陥る可能性がある。
beforeDestoy : インスタンスが破棄される直前
destoryed : インスタンスの破棄が完了

ライフサイクルcreated時に何らかの処理を実行する場合、このように記述する。

var app1 = new Vue({
  el: '#app1',
  created: function(){
    //do created action
  }
});

リンク