【Vue.js入門】11_算出プロパティ

Vue.js入門第11回。今回は算出プロパティについて解説してみます。

算出プロパティ（computed)とは

計算した結果を返すことができるプロパティです。

算出プロパティは一見メソッド（methodsプロパティ）に定義する関数と同じに見えますが、以下の違いがあります。

• 文法の違いとして、methodsはカッコが必要なのに対し、computedはカッコが不要
• methodsはgetterだけなのに対し、computedはsetterも使える※1
• methodsはキャッシュされないのに対し、computedは元となるプロパティが変わらなければキャッシュ値が使われる

※1：プロパティである点を意識しておくとハマりづらいと思います。

ソースコード（基本）

解説

Javascript

messageプロパティを反転して返す関数をmethodsとcomputedプロパティに定義しています。

HTML

呼び出すHTML側はマスタッシュ構文とv-bindディレクティブどちらでも出力しています。上述したようにreverseMessageにはカッコが必要で、reverseMessage2には不要です。

キャッシュされているかどうかは見た目ではわかりませんが、computedのreverseMessage2はmessageプロパティが変わるまではキャッシュされた値が返却されています。サイズが大きい配列などを取り扱う場合、パフォーマンス向上に繋がります。

ソースコード（setter、getter）

算出プロパティはsetterもgetterも使える点をおさえておきます。

サンプルとして税抜き価格と税込価格を表示してみます。

解説

Javascript

dataプロパティには基本となるpriceプロパティを定義しています。

computedプロパティに税込価格を保持するtaxIncludePriceプロパティを定義しています。この時点で、関数（methods）とは異なるというところがわかると思います。

更にtaxIncludePriceプロパティ内にget関数とset関数を定義して、get関数では税込価格を返却し、set関数には入力された税込価格を税抜き価格に計算してpriceプロパティに設定する処理を書いています。

HTML

HTMLでは双方向データバインディングを使って、

• priceに変化があった場合はtaxIncludePriceプロパティのgetが呼び出され、priceの税込価格を表示する
• taxIncludePriceプロパティに変化があった場合はtaxIncludePriceのsetが呼び出され、priceに税抜き価格が設定されて表示する

処理を実現しています。

ソースコード（キャッシュ確認）

サンプルとしてランダムな数値を返却する関数で確認してみます。

Javascript

それぞれ任意の数値を返却する関数numとnum2を定義しました。

HTML

HTMLでは３回ずつ、computedとmethodsの関数を呼び出しています。

結果として、methodsに定義したnumはそれぞれ値が異なるのに対して、computedで定義したnum2は全て同じ値が表示されています。

それは算出プロパティではリアクティブデータに変更がない限りはキャッシュの値が使われるためです。