こんにちは！ともです(@_tomo_engineer)！

この記事ではVue.jsの算術プロパティについてまとめます。

参考にしたものは以下です。

基礎から学ぶVue.js(書籍)

Vue.js：日本語ドキュメント

算術プロパティとは

算術プロパティはcomputedオプションに定義される任意のデータを返す関数です。

この算術プロパティが担う目的は次です。

ゲッターとセッターとは何を意味しているのでしょうか。

ゲッターとセッター

算術プロパティにはゲッターとセッターという機能があります。

上記のv-model側のhalfPriceがセッター、Mastach内のものがゲッターとして働く算術プロパティです。

computed: {
        halfPrice: {
            get: function(){return this.price / 2},
            set: function(val){this.price = val * 2},
        }
}

getterとして動作している方では、もとのデータを２倍して(加工して)返却しています。

setterとして動作している方では、もとのデータに２倍して(加工して)保存しています。

この様に、算術プロパティでは任意の複雑な処理をまとめてくれます。

get, setを明記していない場合はデフォルトでgetterとして動作します。

算術プロパティを使うメリット

算術プロパティを利用する目的とは何なのでしょうか。

３割引きの特別価格を表示する場合を考えると、下２つのどちらが分かりやすいでしょうか。

{{ price * tax * 0.3 }}

{{ specialPrice }}

上のテンプレートやりたい事が何か分かりませんが、下であれば特別価格を表示したいんだと分かりやすいですね。

compute: {
     specialPrice : function() {
          return this.price * this.tax * 0.3
     }
}

computeオプションに上記の様にすれば良いですね。

この様に任意の処理をまとめて返す事で、テンプレートの可読性をあげる事が出来ます。

算術プロパティでしてはいけない事

算術プロパティ(getter)が担う役割は、アプリケーション層に加工したデータを渡す事です。

次の事を絶対にしてはいけません。

new Vue({
     el: '#app',
     data: {
        price: 100,
        tax: 1.08
     },
     computed: {
        includeTax: function() {
             this.price = this.price * tax;
             return this.price
        }
     }
})

ちょっとめちゃめちゃ過ぎかも知れませんが、このincludeTaxという算術プロパティ(getter)ではデータ自体が加工されてしまっています。this.price = this.price * this.tax

算術プロパティ(getter)ではアプリケーション層に加工されたデータを返す事が目的ですが、もとのデータを変更したりしてはいけません。

まとめ

算術プロパティについて見ていきました。

まとめると以下です。

勉強する前はsetterとしての機能に気がつきませんでした。算術プロパティをうまく使って上手にテンプレートを作って行きたいです。