Vue.js Computed(算出)プロパティ

動的なデータを表現できる。

テンプレート内でも式は記述可能だが、それではコード量が増えて行くほどに管理しづらいものとなる。

そのためにテンプレート内には式を記述せず、computedプロパティやmethodを使用するのが一般的。

new Vue({
  el: "#app",
  data: {
    counter: 0
  },
  computed: {
  lessThanThree: function() {
    return this.counter > 5 ? '〜5' : '5〜'
  }
  }
})

データは動的なものを表現できない。あくまでも初期値を設定するもの。

computedとmethodの違い

二重中括弧の中にmethodsを記述すると、テンプレート内が再描画されるたびに読み込まれる。

一方、同じように二重中括弧の中にconputedプロパティを記述した場合、計算対象の値が更新された時にその値部分だけが再描画される。

同じ動作は可能だが、内容によってはmethodsを使用することで無駄な実行が増えてしまうため使用には気をつけたいところ。