Vue.js 算出プロパティ
前回の記事はこちら
Vue.jsで使えるjavascript式とフィルタの使い方
jsfiddleで実際に記述しながら読むことをおすすめします。
算出プロパティ
算出プロパティは関数によって算出したデータを返します。
以下の４つを紹介します。
算出プロパティの基本
算出プロパティとメソッドの比較
算出プロパティのgetterｍとsetter
算出プロパティのキャッシュ
算出プロパティの基本
まずは以下のコードを見て下さい。
<divid="app"><p>{{ message.split('').reverse().join('') }}</p></div><script src ="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>varapp=newVue({el:'#app',data:{message:"Hello Vue.js!"}})実行結果
マスタッシュ構文{{}}の中で文字列を
逆にする処理を行っています。
しかしプログラムが大きくなるにつれて
マスタッシュ構文内の可読性が悪く
コード全体の見通しが悪化する恐れがあります。
算出プロパティcomputedを使用して書き換えてみます。
<divid="app"><p>{{ message.split('').reverse().join('') }}</p><p>{{ reversedMessage}}</p><!--算出プロパティで書き換え--></div><script src ="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>varapp=newVue({el:'#app',data:{message:"Hello Vue.js!"},//以下算出プロパティcomputed:{reversedMessage:function(){returnthis.message.split('').reverse().join('')}}})実行結果
上記のように算出プロパティを使うことで処理の記述をjs側に
まとめることができるためhtmlの可読性が担保できます。
また処理の再利用が増えた場合も簡単になります。
算出プロパティとメソッドの比較
算出プロパティもメソッドもデータを取って
表示するだけなら動作は同じに見えます。
以下は比較例です。
<divid="app"> <p>{{ reversedMessage }}</p> <p>{{ reversedMessageMethod() }}</p></div><script src ="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>varapp=newVue({el:'#app',data:{message:"Hello Vue.js!"},computed:{reversedMessage:function(){returnthis.message.split('').reverse().join('')}},methods:{reversedMessageMethod:function(){returnthis.message.split('').reverse().join('')}}})実行結果
違いその１ 引数の有無
処理の内容は同じですが
算出プロパティは()が無し メソッドは()が有り
と引数の有無に違いがあります。
違いその２ setter/getter
算出プロパティは必要に応じてsetter/getterいずれも持つことができます。
メソッドはgetterしか持つことができません。
税抜/税込みの計算を例に見てみましょう。
<divid="app"><p>
base price: <inputtype="text"v-model="basePrice"><!--税抜（本体）価格--></p><p>
tax included price: <inputtype="text"v-model="taxIncludedPrice"><!--税込価格--></p></div><script src ="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>varapp=newVue({el:'#app',data:{basePrice:100},computed:{taxIncludedPrice:{get:function(){//getterreturnparseInt(this.basePrice*1.08)},set:function(taxIncludedPrice){//setterthis.basePrice=Math.ceil(taxIncludedPrice/1.08)}}}})実行結果
perseInt関数・・・整数を返す
Math.ceil関数・・・小数点を切り上げる
getter側の流れ
①上のinputタグに入力されたbasePriceがv-modelディレクティブでdataプロパティに渡される
②taxIncludedにてbasePriceはgetterとして渡され1.08倍されて下のinputタグに描画
setter側の流れ
①下のinputタグに入力されたtaxIncludedPriceはsetterとして/1.08の処理される
②v-modelディレクティブによってdataプロパティのbasePriceとして渡されて上のinputタグに描画
算出プロパティではdataからgetで受け取ったデータを処理することも
処理をしてからdataへsetでデータを渡すことも可能という意味です。
違いその3 キャッシュ
算出プロパティはキャッシュされます。
メソッドはキャッシュされません。
キャッシュとは呼び出されるたびに処理が走るか走らないかの違いです。
プログラムが大きくなるにつれて処理の有無がスピードに影響します。
こちらは乱数を3回繰り返す処理を例にします。
<divid="app"><h3>算出プロパティ</h3><p>{{ computedNumber }}</p><p>{{ computedNumber }}</p><p>{{ computedNumber }}</p><h3>メソッド</h3><p>{{ methodsNumber() }}</p><p>{{ methodsNumber() }}</p><p>{{ methodsNumber() }}</p></div><script src ="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>varapp=newVue({el:'#app',computed:{computedNumber:function(){returnMath.random()}},methods:{methodsNumber:function(){returnMath.random()}}})実行結果
算出プロパティでは1度取得した値は再処理されずにキャッシュされています。
一方メソッドは1行ごとに処理が走り異なる乱数が３回取得されます。
そのため算出プロパティのほうが早く処理が可能ですが
あえてキャッシュさせない場合はメソッドを使いましょう。
次回は監視プロパティです。
