Vue

【Vue.js 2.9】はじめてのVue.js 算出プロパティの使い方

  /

・算出プロパティの書き方
・メソッドとの違いを紹介

はじめに

今回はVue.jsの算出プロパティの書き方の紹介です。
算出プロパティはメソッドのような立ち位置となっていますが細かいところでメソッドと違いがあるためそれも含めて紹介します。

https://osusublog.net/?p=2237

環境情報

名前詳細
Vue.js開発バージョン（https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js）
エディタJSFiddle（https://jsfiddle.net/）

算出プロパティの書き方

算出プロパティは、computedを使って表すことが出来ます。
今回はVue.js公式サイトで紹介されている、message変数の値を反転した状態で表示させます。

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<div id='app'>
  <p>
   通常表示：{{ message }}
  </p>
  <p>
   反転表示：{{ reversedMessage }}
  </p>
</div>
new Vue({
	el: '#app',
	data:{
		message: '1234567890',
	},
	computed:{
		reversedMessage:function(){
			return this.message.split('').reverse().join('')
		}
	}
})

Vue.js側ではcomputedを用意して中にfunctionを定義しています。
functionの中にはmessage変数を反転する処理を記載しています。

HTML側では定義したfunction名を呼び出しています。

メソッドとの違い

算出プロパティの書き方は、Vue.jsのメソッド（methods）や一般的なメソッドの書き方、呼び出し方と似ています。
しかし両者は明確に違いが存在しています。

算出プロパティは呼ぶ場合にカッコが不要

メソッドを呼ぶ場合引数が無くてもカッコが必要です。
一方算出プロパティは引数が無い場合カッコは不要です。

算出プロパティはsetterが定義可能

算出プロパティはsetterが定義可能です。
getterはデフォルトで使われています。

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<div id='app'>
  <input type='text' v-model='price' />
  <input type='text' v-model='taxPrice' />
</div>
new Vue({
	el: '#app',
	data:{
		price: 1000,
	},
	computed:{
		taxPrice:{
			get: function(){
				return parseInt(this.price * 1.08)
			},
			set: function(value){
				this.price = Math.ceil(value / 1.08)
			}
		}
	}
})

画像では分かりづらいですが、右側のテキストボックスを変更すると左側も変わるようになります。
左側のテキストボックスが変更されるとtaxPriceプロパティのgetが動作し、price変数の税込み表記が反映されます。
右側のテキストボックスが変更されるとtaxPriceプロパティのsetが動作し、price変数に税抜きの値が設定され、v-modelにより画面上に反映されます。

算出プロパティはキャッシュされる

算出プロパティは、画面が再描画されない限り結果はキャッシュされ同じ結果が返されます。
一方メソッドは呼ぶ度に動作されます。

例えば配列などの大量データを反映した結果を数度表示する場合などに処理回数が1回で済み処理が重くならないメリットがあります。
ただし、呼ぶ度にランダムな値が欲しい場合などはメソッドでは無いと実現出来ないので注意が必要です。

参考記事

算出プロパティとウォッチャ
https://jp.vuejs.org/v2/guide/computed.html

RELATED POST