计算属性
计算属性用于解决表达式过长或逻辑复杂时的问题。
关键字：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的计算属性也会变化。