Vue.js 計算プロパティ
計算プロパティのキーワード:computed。
計算プロパティは、複雑なロジックを処理するときに非常に役立ちます。
以下の文字列を反転させる例を見てみましょう：
例 1 ではテンプレートが非常に複雑になり、理解しにくくなっています。
次に、計算プロパティを使用した例を見てみましょう：
例 2
<div id="app">
<p>元の文字列: {{ message }}</p>
<p>計算後の反転文字列: {{ reversedMessage }}</p>
</div>
<script>var vm = new Vue({
el: '#app',
data: {
message: 'サンプル!'
},
computed: {
// 算出プロパティのゲッター
reversedMessage: function () {
// `this` は vm インスタンスを指す
return this.message.split('').reverse().join('')
}
}
})</script>
試してみる »
例 2 では、reversedMessage という計算プロパティを宣言しています。
提供された関数は、プロパティ vm.reversedMessage のゲッターとして使用されます。
vm.reversedMessage は vm.message に依存しており、vm.message が変更されると、vm.reversedMessage も更新されます。
computed vs methods
methods を使用して computed の代わりにすることもできます。効果はどちらも同じですが、computed はその依存関係に基づいてキャッシュされ、関連する依存関係が変更された場合にのみ再取得されます。一方、methods を使用すると、再レンダリングのたびに関数が常に再呼び出しされて実行されます。
例 3
methods: {
reversedMessage2: function () {
return this.message.split('').reverse().join('')
}
}
試してみる »
computed を使用する方がパフォーマンスが良いと言えます。ただし、キャッシュしたくない場合は、methods プロパティを使用できます。
computed setter
computed プロパティはデフォルトでは getter のみですが、必要に応じて setter を提供することもできます:
例 4
var vm = new Vue({
el: '#app',
data: {
name: 'Google',
url: 'http://www.google.com'
},
computed: {
site: {
// getter
get: function () {
return this.name + ' ' + this.url
},
// setter
set: function (newValue) {
var names = newValue.split(' ')
this.name = names[0]
this.url = names[names.length - 1]
}
}
}
})
//setter を呼び出すと、vm.name と vm.url も対応して更新されます。
vm.site = 'サンプル http://www.example.com';
document.write('name: ' + vm.name);
document.write('<br>');
document.write('url: ' + vm.url);
試してみる »
例の実行結果からわかるように、vm.site = 'サンプル http://www.example.com'; を実行すると、setter が呼び出され、vm.name と vm.url も対応して更新されます。
