computed的好处
在模版中写表达式非常的便利，但是在模版中太多的逻辑会让模版过重，难以维护
我觉得模版上应该尽可能的干净整洁，要什么数据，需要如何展示，使用一个单词放在模版上都简洁。官方也有说到，对于任何复杂逻辑，你都应当使用计算属性。使用计算属性还容易扩展，不用频繁改变模版，多处用到的时候，也只需要修改一处。
我们可以将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果确实是完全相同的。但是不同的是，计算属性是基于vue的响应式以来进行缓存的。只有在相关响应式以来发生改变时他们才会重新求值。但是函数则不行，下面我写了一些demo来验证。
computed和methods的对比
如果在页面上调用两次computed和两次methods，会发现，computed只调用了一次，methods会调用两次，这个是computed的好处。
<div id="app">
<p>{{msg}}</p>
<div>{{comMsg}}</div>
<div>{{comMsg}}</div>
<div>{{metMsg()}}</div>
<div>{{metMsg()}}</div>
</div>
<script src="../../dist/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
msg: 'hello vue'
computed: {
comMsg() {
console.log('computed')
return `${this.msg}computed`
methods: {
metMsg() {
console.log('methods')
return `${this.msg}methods`
</script>
所以，我感觉，如果初始化的时候，多个地方用到某个拼接的值，我们可以使用computed去做优化，如果后续有更新操作的话也是一样的，computed只会执行一次，methods会执行两次
<button @click="changeMsg">改变msg</button>
methods: {
changeMsg() {
this.msg = '666'
当我点击改变msg按钮的时候，可以看到，控制台那边，methods还是执行了两次，computed执行一次。
缓存的重要性
我们为什么需要缓存？假设我们有一个性能开销比较大的计算属性 A，它需要遍历一个巨大的数组并做大量的计算。然后我们可能有其他的计算属性依赖于 A。如果没有缓存，我们将不可避免的多次执行 A 的 getter！如果你不希望有缓存，请用方法来替代。
