Vue.jsの算出プロパティとメソッドの違い

実行されるタイミングが異なる

算出プロパティ→リアクティブな依存関係が更新された場合のみ実行
メソッド→再描画が起きるタイミングで毎回実行

<div id="example">
  <p>Original message: "{{ message }}"</p>
  <p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>

var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    // 算出 getter 関数
``
    reversedMessage: function () {
      // `this` は vm インスタンスを指します
      return this.message.split('').reverse().join('')
    }
  }
})

これはメソッドでも実現可能である。

// コンポーネント内
methods: {
  reverseMessage: function () {
    return this.message.split('').reverse().join('')
  }
}

しかし、以下のようにDate.now() はリアクティブな依存ではないため算出プロパティは実行されない。

computed: {
  now: function () {
    return Date.now()
  }
}

このような場合はメソッドを使うべき。