什么是计算属性：
在模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护，所以，对于任何复杂逻辑，你都应当使用计算属性。
计算属性和方法区别：
尽管使用方法也能实现计算属性相同效果，但最明显的区别在于：计算属性是基于它们的依赖进行缓存的，只有相关依赖发生改变时它们才会重新求值。
案例：
<template>
<div>
{{messageCmp}} <br/>
<button @click="mclick">点击</button> <br/> <br/>
{{message2Cmp}}
</div>
</template>
<script>
export default {
data(){
return {
message: '123,456,789'
}
},
// 计算属性
computed: {
messageCmp(){
console.log('messageCmp 被执行!');
return this.message.split(',').reverse().join(','); //反转message值
},
// 提供 get set方法
message2Cmp: {
get(){
console.log('message2Cmp get被执行!');
return this.message2 += ' hello';
},
set(val){
console.log('message2Cmp set被执行!');
this.message = val;
}
}
},
methods: {
mclick(){
this.message = 'aa,bb,cc';
this.message2Cmp = 'hello message2';
console.log(this.message2Cmp );
}
}
mounted(){}
}
</script>
一般情况下，计算属性不会使用到set，直接默认get ( messageCmp )方式返回处理后的值。
