計算屬性
計算屬性用于解決表達式過長或邏輯複雜時的問題。
關鍵字：computed
示例：
<!--進行中繼資料，便于二次利用-->
<div id="myApp">
今年3月3日發賣的任天堂新一代主機Switch的價格是：{{price}}日元，含稅價格為：{{priceInTax}}日元，折合人名币為：{{pricceChinaRMB}}元。
</div>
<script>
var myApp = new Vue({
el: '#myApp',
data: {
price: 29980
},
computed: {
priceInTax: function () {
return this.price * 1.08;
},
pricceChinaRMB: function () {
return Math.round(this.priceInTax / 16.75);
}
}
});
</script>
所有的計算屬性都以函數的形式寫在Vue執行個體的computed選項内，最終傳回計算後的結果。
在一個計算屬性裡可以完成各種複雜的邏輯，包括運算、函數調用等，隻要最終傳回一個結果就可以。
注意：計算屬性還可以依賴多個Vue執行個體的資料，隻要其中任一資料發生變化，計算屬性就會重新執行，視圖也會更新。
示例：在購物車内兩個包裹的物品總價。
<div id="app">
總價：{{ prices }}
</div>
<script>
var app = new Vue({
el: '#app',
data: {
package1: [
{
name: 'iPhone 11',
price: 9000,
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 temp = 0;
for (var i = 0; i < this.package1.length; i++) {
temp += this.package1[i].price * this.package1[i].count;
}
for (var j = 0; j < this.package2.length; j++) {
temp += this.package2[j].price * this.package2[j].count;
}
return temp;
}
}
});
</script>
當package1或package2中的商品有任何變化，比如購買數量變化或增删商品時，計算屬性prices就會自動更新，視圖中的總價也會随之變化。
每一個計算屬性都包含一個getter和setter。上面的示例隻是利用getter來讀取。在我們需要時提供一個setter函數，當手動修改計算屬性的值就像修改一個普通資料那樣時，就會觸發setter函數，執行一些自定義操作。
示例：
<div id="app">
姓名：{{ fullName }}
</div>
<script>
var app = new Vue({
el: '#app',
data: {
firstName: 'Jack',
lastName: 'Green'
},
computed: {
fullName: {
//getter:用于讀取
get: function () {
return this.firstName + ' ' + this.lastName;
},
//setter:寫入時觸發
set: function (newValue) {
var names = newValue.split(' ');
this.firstName = names[0];
this.lastName = names[names.length - 1];
}
}
}
});
</script>
當執行app.fullName = ‘John Doe’；時，setter就會被調用，資料firstName和lastName都會相對更新，視圖同樣也會更新。
絕大多數情況下，隻會使用預設的getter方法來讀取一個計算屬性，在業務中很少用到setter，是以在聲明一個計算屬性時，可以直接使用預設的寫法，不必将getter和setter都聲明。
計算屬性除了上述簡單的文本插值外，還經常用于動态地設定元素的樣式名稱class和内聯樣式style。當使用元件時，計算屬性也經常用來動态傳遞props。
計算屬性還有兩個很實用的小技巧容易被忽略：一是計算屬性可以依賴其他計算屬性；二是計算屬性不僅可以依賴目前Vue執行個體的資料，還可以依賴其他執行個體的資料，例如：
<div id="app1"></div>
<div id="app2">
{{reversedText}}
</div>
<script>
var app1 = new Vue({
el: '#app1',
data: {
text: '123,456'
}
});
var app2 = new Vue({
el: '#app2',
computed: {
reversedText: function () {
//這裡依賴的是執行個體app1的資料text
return app1.text.split(',').reverse().join(',');
}
}
});
</script>
這裡我們建立了兩個Vue執行個體app1和app2，在app2的計算屬性reversedText中，依賴的是app1的資料text，是以當text變化時，執行個體app2的計算屬性也會變化。