Vue中的计算属性

1. 计算属性：实际上是把vm中的属性进行计算加工，最后能够返回给页面一个结果，它是实时的，所以不能做异步操作。

2. 细想一下，其实methods方法也能实现1中描述的现象，但是计算属性最大的优势是缓存！！！

   举个例子

   <div id="root">
       <div style="color: gray">
       	// 通过计算属性实现
           <p>{{computedShow}}</p>
           <p>{{computedShow}}</p>
           <p>{{computedShow}}</p>
       </div>
       <div style="color: orange">
       	// 通过方法实现
           <p>{{methodsShow()}}</p>
           <p>{{methodsShow()}}</p>
           <p>{{methodsShow()}}</p>
       </div>
   </div>
   

   new Vue({
       el: '#root',
       computed: {
           computedShow() {
               console.log('computed ----- 来拿数据了');
               return '展示数据';
           }
       },
       methods: {
           methodsShow() {
               console.log('methods ----- 来拿数据了');
               return '展示数据';
           }
       }
   });
   

   结果：像这种有多处用到了computed/methods，可以看到通过计算属性的方式只在初始时调用了一遍getter方法，再调用此计算属性是直接去缓存中拿的数据；而methods方式需要每次都调用一遍方法，效率大大降低
   

3. 完整写法
   ① 上述例子中，我使用的是计算属性的简写方式，其实计算属性的完整规范格式包括setter、getter

   new Vue({
   	el: '#root',
   	data: function (){
   		return {
   			count: 10
   		}
   	}
   	computed: {
   		show: {
   			get() {
   				return this.count;
   			},
   			set(value) {
   				this.count = value;
   			}
   		}
   	}
   });
   

   ② 简写方式默认调用的就是getter方法，省去了setter，因为一般情况下利用计算属性只是展示数据即可，但如果有需求设置计算属性的值，可以写成完整的格式，把setter方法写上。