注：此内容摘抄自：梁灏的《Vue.js实战》
1.在遇到复杂的逻辑时应该使用计算属性。
1 <div class="app1">
2 {{reversedText}}
3 </div>
4
5 var app1=new Vue({
6 el:'.app1',
7 data:{
8 text:'123,456'
9 },
10 computed:{
11 reversedText:function(){
12 return this.text.split(',').reverse().join(',');
13 }
14 }
15 });所有的计算属性都以函数的形式写在Vue实例内的computed选项内，最终返回计算后的结果。
2.每一个计算属性都包含一个getter和一个setter，当手动修改计算机属性的值就像修改一个普通数据那样时，就会触发setter函数。
1 <div class="app3">
2 姓名:{{fullName}}
3 </div>
4
5 var app3=new Vue({
6 el:'.app3',
7 data:{
8 firstName:'Jack',
9 lastName:'Greeen'
10 },
11 computed:{
12 fullName:{
13 get:function(){
14 return this.firstName+' '+this.lastName;
15 },
16 set:function(newValue){
17 var names=newValue.split(' ');
18 this.firstName=names[0];
19 this.lastName=names[names.length-1];
20 }
21 }
22 }
23 });
24 app3.fullName="Nancy Chen";绝大多数情况下，我们只会用默认的getter方法来读取一个计算属性，在业务中很少用到setter，所以在声明一个计算属性时，可以直接使用默认的写法，不必将getter和setter都声明。
小技巧：一是计算属性可以依赖其他计算属性；二是计算属性不仅可以依赖当前Vue实例的数据，还可以依赖其他实例的数据。
3.计算属性缓存
你可能发现调用methods里的方法也可以与计算属性气到同样的作用。
1 <div class="app4">
2 <!-- 注意，这里的reversedText 是方法，所以要带（）-->
3 {{reversedText()}}
4 </div>
5
6 var app4=new Vue({
7 el:'.app4',
8 data:{
9 text:'123,4567'
10 },
11 methods:{
12 reversedText:function(){
13 //这里的this指向的是当前Vue实例
14 return this.text.split(',').reverse().join(',');
15 }
16 }
17 })没有使用计算属性，在methods里定义了一个方法实现了相同的效果，甚至该方法还可以接受参数，使用起来更灵活。为啥还要计算属性呢？原因是计算属性是基于它的依赖缓存的。一个计算属性所依赖的数据发生变化时，它才会重新取值，所以只要text不变，计算属性也就不会更新。但methods则不同，只要重新渲染，它就会被调用，因此函数也就会被执行。
使用哪种取决于你是否需要缓存。
注：此内容摘抄自：梁灏的《Vue.js实战》
