计算属性
在vue中模板内的表达式非常便利，如果在模板内放入太多的逻辑会难以维护，所以就出现了计算属性computed
例子
<p>Reversed message: "{{ reversedMessage}}"</p>
computed: {
//reversedMessage 是在模板中填写的表达式
reversedMessage: function(){
// 必须带有一个return
return this.message.split('').reverse().join()
}
}
在这个计算属性中，reverseMessage依赖message, vue知道这个依赖，因此只要message改变，reverseMessage也会随之而改变。
计算属性缓存vs 方法
我们通过在表达式中调用方法也可以达到同样的效果
<p>Reversed message: "{{ reversedMessage()}}"</p>
// 组件中
methods: {
reversedMessage: function(){
return this.message.split('').reverse().join()
}
}
从这可以看出我们可以将同一函数定义为一个方法而不是一个计算属性。这两种方式的最终结果完全相同。不同的是计算属性是基于它们的依赖进行缓存的，也就是说只要相关依赖发生改变了它们才会重新求值。只要message没有发生改变，多次访问reversedMessage计算属性会立即返回之前的计算结果，不用再次执行函数。
好处：我们使用计算属性缓存，假如是一个性能开销比较大的计算属性，它需要进行大量的计算，如果有别的依赖于它，这样就会减少执行次数，提高性能，性能优化。