Vue中的计算属性

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

细想一下，其实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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

new Vue({
    el: '#root',
    computed: {
        computedShow() {
            console.log('computed ----- 来拿数据了');
            return '展示数据';
        }
    },
    methods: {
        methodsShow() {
            console.log('methods ----- 来拿数据了');
            return '展示数据';
        }
    }
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

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

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

new Vue({
	el: '#root',
	data: function (){
		return {
			count: 10
		}
	}
	computed: {
		show: {
			get() {
				return this.count;
			},
			set(value) {
				this.count = value;
			}
		}
	}
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

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