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


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

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

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

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