こんにちはMinatoです。
今回はVue.jsの「算出プロパティ」の使い方をご紹介したいと思います。
算出プロパティの概要
テンプレート内には、JavaScript式を書くことができます。しかし、簡単な操作しかでず、テンプレート内に多くのロジックを詰め込むと、コードが肥大化し、メンテナンスが難しくなります。
以下の例では、messageの文字列を反転して表示しています。
テンプレートの中にこのようにコードを書いていくとコードが肥大化して、見にくくなります。また、同じ処理が何度もでてくる場合、それぞれ修正しなくてはならず、メンテナンス性も悪くなります。
<div id="app">
{{ message.split('').reverse().join('') }}
</div>そこで、複雑なロジックを定義したい場合や再利用性を高めたい場合は、算出プロパティを利用します。
算出プロパティは以下のように記述することができます。
Vueインスタンスのcomputedプロパティに処理を記述することで算出プロパティを定義することができます。
reversedMessageでは、messageの値が反転されていることが確認できます。
<div id="app">
<p>{{ message }}</p>
<p>{{ reversedMessage }}</p>
</div>new Vue({
el: '#app',
data: {
message: 'hello, world'
},
computed: {
reversedMessage: function () {
return this.message.split('').reverse().join('')
}
}
})算出プロパティとメソッドの違い
算出プロパティの代わりに、同じような関数をメソッドとして定義することも可能です。
ここでは、算出プロパティ（conputed）とメソッド（methods）の違いについて説明します。
呼び出し方
- computed・・・()が不要。
- methods・・・()が必要。
<!-- computed -->
<p>{{ reversedMessage }}</p>
<!-- methods -->
<p>{{ reversedMessage() }}</p>getterとsetter
- computed・・・getter、setterが利用可能。
- methods・・・getterのみ利用可能。
キャッシュ
- computed・・・キャッシュされる。
- methods・・・キャッシュされない。
算出プロパティのgetterとsetter
getterとsetterは算出プロパティの中にgetとsetを定義することで実装できます。
以下の例では、getterはmessageの値を反転させた値を返します。
setterでは、reversedMessageの値を再度反転させた値をmessageに格納するようにしています。
<div id="app">
<p>
<input type="text" v-model="message">
</p>
<p>
<input type="text" v-model="reversedMessage">
</p>
</div>new Vue({
el: '#app',
data: {
message: 'hello, world'
},
computed: {
reversedMessage: {
// getter
get: function() {
return this.message.split('').reverse().join('')
},
// setter
set: function (reversedMessage) {
this.message = reversedMessage.split('').reverse().join('')
}
}
}
})
