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

はじめに

Vue.js テンプレート制御ディレクティブ まとめの続きです。

今回は算出プロパティとメソッドの違いを学習していきます。

算出プロパティcomputed

算出プロパティcomputedは、関数によって算出したデータを返す事ができるプロパティ。

例えば、以下のようにマスタッシュ構文内に複雑なロジックを書くと可読性が悪くなる。

<!-- 文字列を反転する式 -->
{{ message.split('').reverse().join('') }}

こういった複雑なロジックを実行する時に、算出プロパティを利用することが推奨される。

また、ロジックの再利用性を高めたい時などにも利用できる。

computedを利用してコードを書いてみる。

<div id="app">
  <p>
    {{ reverseMessage }} <!-- !sj.euV olleH -->
  </p>
</div>

<script>
  var app = new Vue({
    el: '#app',
    data: {
      message: 'Hello Vue.js',
    },
    // 算出プロパティの定義
    computed: {
      // メソッドの定義
      reverseMessage() {
        return this.message.split('').reverse().join('')
      }
    }
  })
</script>

あれ？これmethodsと何が違うの・・・

computedとmethodsそれぞれの違いを深掘りする。

算出プロパティとメソッドの3つの違い

①プロパティとメソッド

computedはプロパティなので()が不要。

methodsはメソッドなので()が必要。

<!-- computed -->
{{ reverseMessage }}
<!-- methods -->
{{ reverseMessage() }}

②getterとsetter

computedはgetterとsetterを定義する事ができる。

methodsはgetterしか定義できない。

③キャッシュ

computedはキャッシュされる。

methodsはキャッシュされない。

methodsは呼び出されるたびに関数の処理を行う

まとめ

実行したい処理の内容によってcomputedかmethodsか使い分けるのが良さそう。

しかし、現状どういったケースで使い分けるかイメージが沸かない。

この辺りは、実際にアプリケーションを開発しながら身に付けるしかなさそう。

知見が深まり次第、追記していきます

更新履歴

Vue.jsの基本的な使い方まとめ
Vue.jsでTO DOアプリを作る
Vue.js テンプレート制御ディレクティブ まとめ
Vue.js 算出プロパティとメソッドの違い 今ココ