算出プロパティ computed
算出プロパティ
メソッド メソッドなので呼び出しには()がいる 計算結果をキャッシュしないので、一度計算を行った場合も関数を呼び出される度に再計算を行う 使えるのはgetterのみでsetterは使えない
computed
算出プロパティ データそのものに何らかの処理を与えたものをプロパティにしたい(インスタンスに持たせて参照できるようにしたい)ときに用いる 計算結果をキャッシュする 一度計算を行った場合、再度関数を呼び出しても依存しているデータに変更がない限りキャッシュを返す プロパティなので呼び出し時の()はいらない getterとsetterが使える
算出プロパティとメソッドの違い
参考:
【Vue.js】computedとmethodsの違いとは?【初心者向け】
■ プロパティとメソッド
computed -> ()が不要 methods -> ()が必要
{{ hoge() }} {{ hoge }}
的な
■ getter, setter
computed -> getter, setter setterはなくてもOK methods -> getter
■ キャッシュ
computed -> する methods -> されない
getter setter の具体例
new Vue({ el: "#app", data: { basePrice: 100 }, computed: { taxIncludedPrice: { get: function() { return parseInt(this.basePrice * 1.08) }, set: function(taxIncludedPrice) { this.basePrice = Math.ceil(taxIncludedPrice / 1.08) } } } })
<div id="app"> <p> base price: <input type="text" v-model="basePrice"> </p> <p> tax included: <input type="text" v-model="taxIncludedPrice"> </p> </div> --> 二つのinputの値を変更すると、動的に値も変更される