主なオプション(data, computed, filter, props)

単一ファイルコンポーネントを実装する時に利用する主なコンポーネントオプションについて整理します。オプションの「概要」「記述順」「使い分け」など確認します。

主なオプション一覧

利用例

まず、単一ファイルコンポーネントの scriptタグ 内の記述例を示します。主なコンポーネントオプションをスタイルガイドで推奨されいてる順序で記述しています。

import SampleButton from '@/components/SampleButton'
import myMixin from '@/mixins/my-mixin'

export default {
  name: 'TheHeader',

  // 依存関係
  components: {
    SampleButton
  },

  filters: {
    capitalize(value) {
      if (!value) return ''
      value = value.toString()
      return value.charAt(0).toUpperCase() + value.slice(1)
    }
  },

  // オプションをマージ
  mixins: [myMixin],

  // コンポーネントへのインタフェース
  props: {
    items: {
      type: Array,
      default: [],
      required: true
    }
  },

  // ローカル リアクティブプロパティ
  data() {
    return {
      count: 0,
      message: 'Hello'
    }
  },

  computed: {
    reversedMessage() {
      return this.message.split('').reverse().join('')
    }
  },

  // イベント
  watch: {
    '$route' (to, from) {
      console.log('route changed')
    }
  },

  created() {
    console.log('created')
  },

  mounted() {
    console.log('mounted')
  },

  // リアクティブではないプロパティ
  methods: {
    sampleMethod() {
      console.log('sampleMethod')
    }
  }
}

各オプションの概要

プロパティ 概要
name vue-devtools でデバッグするとき、指定したコンポートの名前が表示されます。
components ローカルで利用するコンポーネントを登録します。
filters テキストフォーマット用の処理を定義します。{{ message | capitalize }} のように、パイプ形式でデータを受け取りフォーマットします。
mixins 1. ミックスインオブジェクトを定義
2. 定義したミックスインを利用したいコンポーネント内のmixinsオプションに指定
といった流れで利用します。

複数コンポーネントで利用する共通オプションを定義したいときなどに便利です。
props 親コンポーネントからデータを受け取ります。
data Vueインスタンスで利用するデータオブジェクトを定義します。SFCでは各Vueインスタンスで独立したデータを持たせるため、Function型で登録する必要があります。
computed データの変更に対して反応します。デフォルトは、getterのみ提供してますが、setterも利用できます。
watch データの変更に対して反応します。
ライフサイクルフック インスタンスライフサイクルで実行したい処理を定義します。
methods 「イベント発生時に実行する処理」「computedから呼び出したい処理」がある場合、メソッドを定義します。

比較

computed と data

値の変更が無いのであれば、computedで定義します。

computed と methods

テンプレート内にロジックを記述すると使いまわせないですが、computed methods を利用することでロジックを使いまわせます。パフォーマンス、キャッシュの有無を考えて使い分けます。

  • computed
    • 依存するものが更新されたときにだけ、処理を再実行します。
    • それ以外は、キャッシュが利用されます。
  • methods
    • 常に再描画されると実行します。
  • 参考

computed と watch

computed よりも watch のほう冗長な記述になるため、基本的には computed を利用します。
watch は、データの変更に応じて非同期処理をしたいときなどに利用します。