模板內(nèi)的表達(dá)式非常便利夕春，但是設(shè)計(jì)它們的初衷是用于簡(jiǎn)單運(yùn)算的。在模板中放入太多的邏輯會(huì)讓模板過(guò)重且難以維護(hù)荧降。所以接箫，對(duì)于任何復(fù)雜邏輯，你都應(yīng)當(dāng)使用計(jì)算屬性朵诫。
1. 計(jì)算屬性的用法
所有的計(jì)算屬性都以函數(shù)的形式寫(xiě)在Vue實(shí)例內(nèi)的computed選項(xiàng)內(nèi)辛友，最終返回計(jì)算后的結(jié)果。
計(jì)算屬性的常見(jiàn)用法是自動(dòng)監(jiān)聽(tīng)數(shù)據(jù)變化，其可以依賴多個(gè)Vue實(shí)例的數(shù)據(jù)废累，只要其中一個(gè)數(shù)據(jù)發(fā)生變化邓梅，計(jì)算屬性就會(huì)重新執(zhí)行，視圖也會(huì)更新：
<!-- 計(jì)算屬性用法 -->
<body>
<div id="app">
總價(jià)： {{prices}}
</div>
<script src = "https://unpkg.com/vue/dist/vue.min.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
package1: [
{
name: "iPhone7",
price: 7199,
count:2
},
{
name: "iPad",
price: 2888,
count: 1
}
],
package2: [
{
name: "apple",
price: 3,
count: 5
},
{
name: "banana",
price: 2,
count: 10
}
]
},
computed: {
prices: function() {
var prices = 0;
for (var i = 0; i < this.package1.length; ++i) {
prices += this.package1[i].price * this.package1[i].count;
}
for (var j = 0; j < this.package2.length; ++j) {
prices += this.package2[j].price * this.package2[j].count;
}
return prices;
}
}
})
</script>
</body>
事實(shí)上每一個(gè)計(jì)算屬性都包含一個(gè)getter和一個(gè)setter邑滨，上面的示例只是利用getter來(lái)讀取日缨。在需要時(shí)，也可以提供一個(gè)setter函數(shù)掖看，以執(zhí)行一些自定義的操作匣距。
除了上述簡(jiǎn)單的應(yīng)用計(jì)算屬性進(jìn)行文本插值外，其還常用于動(dòng)態(tài)設(shè)置元素的樣式名稱class和內(nèi)聯(lián)樣式style哎壳；
另外在使用組件時(shí)毅待，計(jì)算屬性也經(jīng)常用來(lái)動(dòng)態(tài)傳遞props；
此外归榕，計(jì)算屬性可以依賴其他計(jì)算屬性尸红，并且其不僅可以依賴當(dāng)前Vue實(shí)例的數(shù)據(jù)，還可以依賴其他實(shí)例的數(shù)據(jù)刹泄。
2. 計(jì)算屬性緩存
事實(shí)上外里，我們可以通過(guò)在表達(dá)式中調(diào)用methods方法來(lái)達(dá)到計(jì)算屬性的同樣效果。
我們可以將同一函數(shù)定義為一個(gè)方法而不是一個(gè)計(jì)算屬性循签。兩種方式的最終結(jié)果確實(shí)是完全相同的级乐。然而，不同的是計(jì)算屬性是基于它們的響應(yīng)式依賴進(jìn)行緩存的县匠。只在相關(guān)響應(yīng)式依賴發(fā)生改變時(shí)它們才會(huì)重新求值风科。這就意味著只要傳入值還沒(méi)有發(fā)生改變，多次訪問(wèn)返回值計(jì)算屬性會(huì)立即返回之前的計(jì)算結(jié)果乞旦，而不必再次執(zhí)行函數(shù)贼穆。
相比之下，每當(dāng)觸發(fā)重新渲染時(shí)兰粉，調(diào)用方法將總會(huì)再次執(zhí)行函數(shù)故痊。
使用計(jì)算屬性還是methods取決于你是否需要緩存，如當(dāng)遍歷大數(shù)組和做大量計(jì)算時(shí)玖姑，應(yīng)當(dāng)使用計(jì)算屬性愕秫。
參考
- 《Vue.js實(shí)戰(zhàn)》
