记录一下今天学习的计算属性相关的东西。
计算属性的语法格式是：computed: {}
计算属性
计算属性一般是为了简化模板中的内容，让模板中内容尽可能简洁。如果我们将太多的逻辑写在模板中，模板将会变得难以维护。例如：
<div id="example"> {{ message.split('').reverse().join('') }} </div>所以，对于任何复杂逻辑，你都应当使用计算属性。 举个栗子：
<body> <div id="app"> {{fullName}} <!-- {{fullName()}} 方法使用的，因为方法需要调用！ --> {{age}} </div> <script> var app = new Vue({ el:'#app', data:{ firstName:'Dell', lastName:'Lee', age: 28 }, // 计算属性完成名字的组合(有缓存，更推荐) // 自带缓存，如果相关的值没有改变，改变页面其他元素的值，不需要重新计算 computed: { fullName(){ console.log('计算了一次'); return this.firstName + ' ' + this.lastName; } }, // 方法完成名字的组合（无缓存） // 方法内部没有缓存机制，相关的值即便没有改变，刷新页面时仍旧需要重新计算 // methods: { // fullName(){ // console.log('计算了一次'); // return this.firstName + ' ' + this.lastName; // } // }, }) </script>你应该发现了fullName更像一个方法，而不像一个属性。这是因为计算属性的简写方式导致，不是它的原始样子，原始样子如下：
<script> computed: { fullName:{ get(){ return this.firstName +' '+this.lastName; }, } }, </script>计算属性默认只有get方法，当只有get方法时，就可以进行简写。
当然，如果有需要，我们可以为计算属性提供它的set方法，set方法在计算属性的值被修改时自动调用。这里主要先理解下get方法。
通常情况下，我们只会用到get方法，所以简写形式居多，但不要把它当做方法。它跟方法是不一样的，方法的每次调用，方法内部逻辑都会执行一遍。计算属性却不会，它具备基于依赖的缓存能力。下面例子来证实这个现象。
<div id="app"> <div>{{reverseMsg}}</div> <div>{{reverseMsg}}</div> <hr> <div>{{reverseStr(msg)}}</div> <div>{{reverseStr(msg)}}</div> </div> <script> let vm = new Vue({ el: '#app', data: { msg: 'Hello' }, computed: { reverseMsg() { console.log('computed') return this.msg.split('').reverse().join('') } }, methods: { reverseStr() { console.log('method') return this.msg.split('').reverse().join('') } } }) </script>上面代码中，计算属性在模板中使用了两次，方法调用也使用了两次，打印发现
方法中的打印语句执行了两次，而计算属性中的打印语句却只执行了一次。这就验证了，计算属性的简写形式虽然长得跟方法一模一样，但它确实不是方法。
总结： 方法的每次调用，方法内部逻辑都会执行一遍。计算属性却不会，它具备基于依赖的缓存能力。
我们为什么需要缓存？假设我们有一个性能开销比较大的计算属性 A，它需要遍历一个巨大的数组并做大量的计算。然后我们可能有其他的计算属性依赖于 A。如果没有缓存，我们将不可避免的多次执行 A 的 getter！如果你不希望有缓存，请用方法来替代。
