Vue.jsにて算出プロパティを学ぶ

算出プロパティはアプリケーションのデーターに基づいて何らかの加工を行った結果を返すプロパティです。

「算出プロパティ」

書式：computed: {算出プロパティ名　:　関数オブジェクト}

うるう年かどうかを判定する算出プロパティを定義しました。

HTML

<div id=”app3″>
調べたい年 ：<input type=”text ” v-model=”thisyear”>
{{thisyear}}年は{{isUrudoshi ? ‘うるう年です’ : ‘うるう年ではありません’}}
</div>

　　　

JavaScript

var app3 = new Vue({
el: ‘#app3’,
data: {
thisyear: (new Date()).getFullYear()
},
computed : {
isUrudoshi: function(){
if((this.year%4 == 0 && (this.year%100 != 0) || this.year%400 == 0)){
return true;
} else {
return false;
}
}
}
});

「算出プロパティはキャッシュ（記憶）される 」

now1とnow2の両方に同じ日時が出力されますが、コンソールから→「app4.show = false」と入力　→「ENTER」　→「app4.show = true」と入力　→「ENTER」を実行すると、now1は日時が更新され、now2は最初の表示のまま変わりません。

メソッドでは再描画のたびに実行されるけど、算出プロパティではキャッシュ（記憶）されることが確認できます。

HTML

<div id=”app4″>
<div V-show=”show”>
<p>メソッド（methods)での描画　now1: “{{ now1() }}”</p>
<p>算出プロパティ(computed)での描画　now2: “{{ now2 }}”</p>
</div>
</div>

JavaScript

var app4 = new Vue({
el: ‘#app4’,
data: {
show : true
},
methods: {
now1 : function(){
return (new Date()).toLocaleString();
}
},
computed: {
now2 : function(){
return (new Date()).toLocaleString();
}
}
});

算出プロパティが適した場面

　　　　　

たとえばECサイトの商品一覧ページで、ユーザーが検索条件を指定して商品を絞り込んだ結果に対して、 購入者の評価が高い順に並び変える場面があるとします。

　　　　

並び変えるたびに元の商品リストを検索するよりも、いったん商品リストを絞り込んだ検索結果をキャッシュ（記憶） しておいて、それを元に並び替える方が無駄な処理が省け、パフォーマンスが良くなります。

わからないことはプロフェッショナルから学ぶのが一番