vue.js編~算出プロパティ~

再利用可能な加工済みデータ

算出プロパティはアプリケーションのデータに基づいて加工を行った結果を返すプロパティです。

computed: {算出プロパティ名: 関数オブジェクト}

うるう年の判定

調べたい年：
{{year}}年は{{isUrudoshi ? 'うるう年です' : 'うるう年ではありません'}}

メソッドは再読み込みの度に実行されるが、算出プロパティはキャッシュされます。
リアクティブデータが更新されると、Vueはキャッシュを捨てて算出プロパティを再度実行します

HTML

<div id="app">
調べたい年：<input type="text" v-model="year"><br>
{{year}}年は{{isUrudoshi ? 'うるう年です' : 'うるう年ではありません'}}
</div>

JavaScript

var app = new Vue({
  el: '#app',
  data: {
    year: (new Date()).getFullYear()
  },
  computed: {
    isUrudoshi: function() {
      //「4で割り切れて100で割り切れない」または「400で割り切れる」場合
      if ((this.year % 4 == 0) && (this.year % 100 != 0) || (this.year % 400 == 0)) {
        return true;
      } else {
        return false;
      }
    }
  }
});

算出プロパティが適した場面

ECサイトの商品一覧ページ等で、ユーザーが検索条件を指定して絞り込んだ結果に対してレビュー順に並び替える場面などで、加工したデータをテンプレート内で頻繁に利用する場面では、メソッドで毎回加工するよりも算出プロパティで加工してバインドしたほうが、パフォーマンスが良くなります。