【Vue.js】算出プロパティについて

算出プロパティとは

関数によって算出したデータを返せる。
プロパティ名はcomputedとなる。
JS

var vm = new Vue({
	el: '#vm',
  data: {
  	comment: "Hello Vue.js!"
  },
  // 算出プロパティ: ここでは文字の反転をさせる。
  computed: {
    reversedComment: function() {
      return this.comment.split('').reverse().join('')
    }
  }
})

HTML

<div id="vm">
  <p>
    {{ reversedComment }}  => !sj.euV olleH
  </p>
</div>

算出プロパティを使うことで、マスタッシュ構文での使い回しができるようになる。

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

似たような算出プロパティとメソッドの違いをまとめてみる。

項目	算出プロパティ	メソッド
末尾の()	不要	必要
getter,setter	両方使える	getterのみ
キャッシュ	される	されない

末尾の()の違い

JSの書き方はほとんど同じ。

var vm = new Vue({
	el: '#vm',
  data: {
  	comment: "Hello Vue.js!"
  },
  computed: {  //プロパティ
    reversedComment: function() {
      return this.comment.split('').reverse().join('')
    }
  },
  methods: {  //メソッド
    reversedCommentMethod: function() {
      return this.comment.split('').reverse().join('')
    }
  }
})

HTMLが微妙に異なる

<div id="vm">
  <p>
    {{ reversedComment }}  <= プロパティ
    {{ reversedCommentMethod() }}  <= メソッド
  </p>
</div>

算出プロパティのgetterとsetter

getterはある属性の値を取得するメソッド。
setterは属性に値を設定するメソッド。
税込価格、税抜き価格の表示をさせてみる。
まずは基本の入力欄を作成。

<div id="vm">
  <p>
    税抜価格： <input type="text">
  </p>
  <p>
    税込価格： <input type="text">
  </p>
</div>

続いてJSの方を作成する。

var vm = new Vue({
  el: '#vm',
  data: {
    basePrice: 1000
  },
  computed: {
    taxInclude: { //算出プロパティ名
      get: function() {
        return parseInt(this.basePrice * 1.08)
      },
      set: function(taxInclude) {
      	this.basePrice = Math.ceil(taxInclude / 1.08)
      }
    }
  }
})

parseIntはstr型からint型に変換するメソッドだが、小数点込みの数字を入力すると小数点以下を切り捨てることができる。
Mathオブジェクトのceilメソッドは小数点以下を切り上げできる。
算出プロパティができたので、HTMLに記述する。

<div id="vm">
  <p>
    税抜価格： <input type="text" v-model="basePrice"> => 1000
  </p>
  <p>
    税込価格： <input type="text" v-model="taxInclude"> => 1080
  </p>
</div>

税抜価格に入力すれば税込価格が、税込価格に入力すれば税抜価格がそれぞれ計算され出力される。

算出プロパティのキャッシュ

computedプロパティで読み込まれた算出データはキャッシュされるので、複数の同じ内容が記載されている場合最初の1回の解がずっと表示される。
一方methodsプロパティは複数の同じ内容が記載されていても1回ずつ計算を算出されるのでrandom関数などを使うと全て異なる値が表示される。