More than 5 years have passed since last update.

Vueのオプション構成・ライフサイクルダイアグラム

Posted at 2018-09-22

Vueのオプション構成

elはアプリケーションを紐づける要素のセレクタ

new Vue({
    el: '#app'
})

dataはアプリケーションで使用するデータ。
オブジェクトや配列を登録することができる

new Vue({
    el: '#app',
    data: {
    message: 'Vue.js'
    }
})

computedは関数によって算出されたデータ。
dataと同じような感覚で使うことができる。

new Vue({
    el: '#app',
    computed: {
    computedMessage: function() {
      //何か処理をした結果をデータとして返す
      return this.message + '!'
    }
  }
})

ライフサイクルは、一定のサイクルを表す。
フックは、あらかじめ登録した処理を、Vueインスタンスの特定のタイミングで自動的に呼び出しを行う。

createdはライフサイクルハックの一つ
createdは、このメソッドを登録したVueのインスタンスが作成され、データの監視などリアクティブまわりの初期化が終わったあとに呼び出しが行われる

new Vue({
    el: '#app',
    created: function() {
    //このインスタンスの作成&初期化が終わってらすぐ
        console.log('created')
    }
})

メソッド	タイミング
beforeCreate	インスタンスが作成され、リアクティブの初期化がされる前
created	インスタンスが作成され、リアクティブの初期化がされた後
beforeMount	インスタンスがマウントされる前
mounted	インスタンスがマウントされた後
beforeUpdate	データが変更され、DOMに適応される前
updated	データが変更され、DOMに適応された後
beforeDestroy	Vueインスタンスが破壊される前
destroyed	Vueインスタンスが破壊された後
errorCaptured	任意の子孫コンポーネントからエラーが補足されたとき

methodsはアプリケーション内で使用するメソッド。
コードを管理しやすくするために処理を分けたり、イベントパンドラなど細かな実装を担当する。

new Vue({
  el: '#app',
  methods: {
    myMethod: function() {
       //処理
    }
  }
})