よく利用するVue.jsのオプションとサンプルコードの纏め

ライフサイクルフック

created

インスタンスが作成された後で実行される。Ajax通信を行いデータを初期化する場合などによく利用される。

new Vue({
  data(){
    return{
      hoge:"a"
    }
  },
  created () {
    console.log('hoge is: ' + this.hoge)
  }
})
// ->hoge is: a

mounted

インスタンスが作成されて、elementへのマウントが完了した後で実行される。プラグインの初期化を行う場合などに利用される。

mounted: function () {
  this.$nextTick(function () {
    // ビュー全体がレンダリングされた後にのみ実行されるコード
  })
}

その他のライフサイクルフック

beforeCreate　・・・　インスタンスの生成前に実行できます。data は空の状態

beforeMount　・・・　インスタンスが作成された後、elementへのマウントされる前で実行されます。data には値があるがエレメントには値が設定されない状態

beforeUpdate　・・・ データの更新があった時に、rerenderされる前に実行されます。更新前の既存のDOMに対してアクセスすることができます。

updated　・・・　データの更新があった時に、rerenderされた後に実行されます。このフックでは、状態変化を行うような処理は無限ループに入ってしまう可能性がある為推奨されない。

beforeDestroy　・・・　インスタンスが削除される前に実行されます。

destroyed　・・・　インスタンスが削除された後に実行されます。

errorCaptured　・・・　任意の子孫コンポーネントからのエラーが捕捉された時に、呼び出されます。

データ

data

• Vueインスタンスで利用するデータオブジェクトを定義してどんなデータがあるのかを指定します。
• dataには、数値、文字列、ブーリアン、配列、オブジェクトなど、javascriptで使用できるデータは全て使えます。

data: function () {
    return {
        message: 'some default data.',
        object: {
            fresh: true
        }
    }
}

props

• 親コンポーネントから受け取るデータを定義します。

親コンポーネント

<child
  :param0="item"
  :param1="value"
/>

子コンポーネント

 props: ['item', 'value']

emit

• 子から親コンポーネントへデータを受け渡す為の関数を呼び出します

子コンポーネント

<script>
export default {
  data () {
    return {
      value: 0
    }
  },
  methods: {
    plusOne () {
      this.value += 1
      this.$emit('updated')
    }
  }
}
</script>

親コンポーネント

<template>
  <counter @updated="updateEvt" />
</template>
 
<script>
import Child from './Child.vue'
export default {
  components: {
    Child
  },
  methods: {
    updateEvt () {
      console.log('The value updated')
    }
  }
}
</script>

computed（算出プロパティ）

• データそのものに何らかの処理を与えたものをプロパティにしたい(インスタンスに持たせて参照できるようにしたい)ときに用いる
• プロパティが依存関係にある場合は、プロパティ値が変わる度に自動計算してくれる
• 計算結果をキャッシュする
• 一度計算を行った場合、再度関数を呼び出しても依存しているデータに変更がない限りキャッシュを返す
• プロパティなので呼び出し時の()はいらない
• getterとsetterが使える

var vm = new Vue({
  data: { a: 1 },
  computed: {
    // get のみ、関数が一つ必要なだけ
    aDouble: function () {
      return this.a * 2
    },
    // get と set 両方
    aPlus: {
      get: function () {
        return this.a + 1
      },
      set: function (v) {
        this.a = v - 1
      }
    }
  }
})
vm.aPlus // -> 2
vm.aPlus = 3
vm.a // -> 2
vm.aDouble // -> 4

methods（メソッド）

• 振る舞いは基本的にcomputedと同様です。
• 違いは、computedはデータ変更がトリガなのに対し、methodsは、クリック時、マウスオーバー時等、何かアクションが起きた時に処理を行う
• メソッドなので呼び出しには()がいる
• 使えるのはgetterのみでsetterは使えない計算結果をキャッシュしないので、一度計算を行った場合も関数を呼び出される度に再計算を行う

var vm = new Vue({
  data: { a: 1 },
  methods: {
    plus: function () {
      this.a++
    }
  }
})
vm.plus()
vm.a // 2

watch（監視プロパティ）

• data や computed の状態を監視して、変化があったとき登録した処理を自動実行します。つまり、データの変化をトリガにしたフックです。
• データ変化であれば、computed のsetter/getterで十分かと思いますが、非同期やコストの高い(重い)処理を実行したいときに最も便利です。

var vm = new Vue({
  data: {
    a: 1
  },
  watch: {
    'a': function (val, oldVal) {
      console.log('new: %s, old: %s', val, oldVal)
    }
    // メソッド名の文字列
    'b': 'someMethod',
    // deep なウォッチャ
    'c': {
      handler: function (val, oldVal) { /* ... */ },
      deep: true
    }
  }
})
vm.a = 2 // -> new: 2, old: 1

アセット

components

ローカルで利用するコンポーネントを登録します。

<script>
import Name from "./components/Name";

export default {
  components: { Name }
};
</script>

filters

• 文字数を丸めたり数字にカンマを入れるといったテキストベースの変換処理に特化した機能
• {{ message | capitalize }} のように、パイプ形式でデータを受け取りフォーマットする。
• this へのアクセスは出来ない
• グローバルに定義ができる

<template>
  {{ message | capitalize }}
</template>
 
<script>
export default {
  data: {
    message: ''
  },
  filters: {
    capitalize: function (value) {
      if (!value) return ''
      value = value.toString()
      return value.charAt(0).toUpperCase() + value.slice(1)
    }
  }
}
</script>

その他

mixins

• Vueコンポーネント外で定義した、オプションをコンポーネントに組み込むことができる機能です。
• 共通で利用するミックスインオブジェクトを定義しておき利用したいコンポーネント内のmixinsオプションに指定する
• 複数コンポーネントで利用する共通オプションを定義したいときなどに便利です。

var mixin = {
  created: function () {
    console.log(1)
  }
}
var vm = new Vue({
  created: function () {
    console.log(2)
  },
  mixins: [
    mixin
  ]
})
// -> 1
// -> 2