Vue.jsの算出プロパティcomputed

Vue.jsのmethodsプロパティと似ているプロパティでcomputedというプロパティがあります。算出プロパティと呼ばれているようです。

view raw

gistfile1.txt

hosted with ❤ by GitHub

上記ではempnameが算出プロパティ名です。評価されるときに実行されるのがコロンの後に定義している関数です。（switch文で分岐しているだけです）

この算出プロパティ名はmustache（マスタッシュ）に書くことができるので{{empname}}というように書くことができます！

また公式サイトによりますと

算出プロパティは、リアクティブな依存関係が更新されたときにだけ再評価されます。

だそうです。要するにnameかempidが変更された場合のみ再評価される、という感じです。

変更されなければキャッシュされます。この点がmethodsプロパティとの違いで、算出プロパティと同様のことはmethodsプロパティでも実現可能ですが、キャッシュされるされないが大きな違いです。

実際は算出プロパティを使うことが多いようです。

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	</head>
	<body>
	<div id="app">
	従業員番号:<input type="text" v-model="empid" placeholder="1,2,3のどれか"><br>
	{{empname}}<br>
	</div>
	<script src="https://jp.vuejs.org/js/vue.js"></script>
	<script>
	var app = new Vue({
	el: '#app',
	data: {
	name: '',
	empid: ''
	},
	computed: {
	empname: function() {
	console.log(this.empid);
	switch (this.empid) {
	case '1':
	this.name = 'takahashi';
	break;
	case '2':
	this.name = 'higashiguchi';
	break;
	case '3':
	this.name = 'taniguchi';
	break;
	default:
	this.name = '';
	break;
	}
	return this.name + ':' + this.empid;
	}
	}
	});
	</script>
	</body>
	</html>