1 应用场景
Vue.js 的表达式如果因为逻辑复杂变得过长时，就会变得臃肿，以至于难以阅读和维护。
这里我们对一个以分号分隔的字符串做逆序处理，并修改分隔符为逗号的表达式。
html：
<div id="app">
{{str.split(';').reverse().join(',')}}
</div>
js：
var app=new Vue({
el:'#app',
data:{
str:'1;2;3'
}
});
输出结果：
3,2,1
使用计算属性之后——
html：
<div id="app2">
{{reversedStr}}
</div>
js：
var app2 = new Vue({
el: '#app2',
data: {
str: '1;2;3'
},
computed: {
reversedStr: function () {
return this.str.split(';').reverse().join(',');
}
}
});
所有的计算属性都以函数的形式定义在 Vue 实例内的 computed 属性内，这些函数最终会返回计算后的结果 。
2 依赖多个数据
计算属性还可以依赖 data 属性内的多个数据，只要其中任一数据发生变化，计算属性就会重新执行，视图也会得到相应的更新。我们以购物车内两种的物品为例，说说如何通过计算属性来计算购买商品的总价：
html：
<div id="app">
购买的商品：{{commodity1.name}} * {{commodity1.count}}、{{commodity2.name}} * {{commodity2.count}}，总价：{{totalPrice}}
</div>
js：
<script>
var app = new Vue({
el: '#app',
data: {
commodity1: {
name: 'Bose SoundSport Free 真无线蓝牙耳机',
price: 1998,
count: 1
},
commodity2: {
name: 'Kindle paperwhite 电子书阅读器',
price: 998,
count: 2
}
},
computed: {
totalPrice: function () {
return this.commodity1.price * this.commodity1.count + this.commodity2.price * this.commodity2.count;
}
}
});
</script>
输出结果：
购买的商品：Bose SoundSport Free 真无线蓝牙耳机 * 1、Kindle paperwhite 电子书阅读器 * 2，总价：3994
当 commodity1 或 commodity2 中的商品有任何变化，比如购买数量变化或价格调整时，计算属性 totalPrice 就会自动更新。
3 get 与 set 函数
每一个计算属性都包含一个 getter 和 setter，之前的示例只是利用了 getter 来读取计算结果。在需要时，我们可以提供一个 setter 函数，当手动修改计算属性的值时，就会触发 setter 函数，可以在此函数中定义一些操作。例如：
html：
<div id="app2">
商品总价：{{totalPrice}}
</div>
js：
var app2 = new Vue({
el: '#app2',
data: {
price: 28,
count: 3
},
computed: {
totalPrice: {
get: function () {//读取
return this.price * this.count;
},
set: function (val) {//写入
var array = val.split(',');
this.price = array[0];
this.count = array[1];
}
}
}
});
app2.totalPrice = '30,3';
输出结果：
商品总价：90
绝大多数情况下，只会用默认的 getter 方法来读取计算属性的值，很少用到 setter ，所以在声明一个计算属性时，可以直接使用之前介绍的默认写法O(∩_∩)O~
4 依赖其它 Vue 实例
还可以依赖其它 Vue 实例中的数据或计算属性。
html：
<div id="app3">
最终价格：{{actualPrice}}
</div>
js：
var app3 = new Vue({
el: '#app3',
data: {},
computed: {
actualPrice: function () {
return app2.totalPrice * 0.8;
}
}
});
输出结果：
最终价格：72
**注意：**引用的 Vue 实例必须在调用之前就已经定义好。
5 缓存
之前的示例代码，调用 methods 里定义的方法也可以起到与计算属性相同的作用。
既然使用 methods 就可以实现，那么为什么还需要用到计算属性呢？原因就是计算属性是基于它的依赖做了缓存。一个计算属性所依赖的数据发生变化时，它才会重新取值。
我们先定义一个休眠函数：
/**
* 休眠
* @param n 休眠时间，单位为毫秒
*/
function sleep(n) {
var start = new Date().getTime();
while (true) {
if (new Date().getTime() - start > n) {
break;
}
}
}
因为 js 是单线程的， 所以我们这里使用 while(true) ｛｝，使得 whlie(){} 后面的程序被阻塞，从而实现休眠 。
js：
var app4 = new Vue({
el: '#app4',
data: {},
computed: {
now: function () {
return Date.now();
}
}
});
console.log("app4.now:" + app4.now);
sleep(3000);
console.log("app4.now2:" + app4.now);
var app5 = new Vue({
el: '#app5',
data: {},
methods: {
now: function () {
return Date.now();
}
}
});
console.log("app5.now:" + app5.now());
sleep(3000);
console.log("app5.now2:" + app5.now());
输出结果：
从结果中可以看出：计算属性 now 没有变化。但 methods 不同，只要重新调用，函数就会被执行。
当遍历大数组或做大量计算时，建议使用自带缓存功能的计算属性哦O(∩_∩)O~