1、分离逻辑
需求如下：
// 给定文本 text，去除其首尾空白，然后将其反转显示。
// 例：
const text = '花费'
// ==> 花费
不使用计算属性，代码长这样：
<template>
<div id="example">
{{ text.split('').reverse().join('') }}
</div>
</template>
<script>
export default {
data: () => ({
text: '花费'
})
}
</script>
使用计算属性后，代码长这样：
<template>
<div id="example">
{{ normalizedText }}
</div>
</template>
<script>
export default {
data: () => ({
text: ''花费"
}),
computed: {
normalizedText() {
return this.text.split('').reverse().join('')
}
}
}
</script>
显而易见，使用计算属性后，相关逻辑放在了 computed 选项内，模板更干净了
Vue 中我们不需要在 template 里面直接 {{ text.split('').reverse().join('') }}实现该功能，因为在模版中放入太多声明式的逻辑会让模板本身过重，尤其当在页面中使用大量复杂的逻辑表达式处理数据时，会对页面的可维护性造成很大的影响，而 computed 的设计初衷也正是用于解决此类问题。
在一个计算属性里可以完成各种复杂的逻辑，包括运算、函数调用等，只要最终返回一个结果就可以。
2、缓存值
接上例，如果我们不去改变 text 的值，那么 normalizedText 就不会重新计算，也就是说，normalizedText 会缓存其求值结果，直到其依赖 text 发生改变。我们可以测试一下：
3、双向绑定
我们可以利用计算属性的 getter 和 setter 实现数据的双向绑定：
使用场景：计算属性适合用在模板渲染中，某个值是依赖了其它的响应式对象甚至是计算属性计算而来
