大多数情况下，我们都可以将Vue组件中定义的属性数据直接渲染到HTML中，但有些情况下，属性中的数据需要处理后再进行渲染，Vue给我们提供了计算属性来实现这种逻辑。
计算属性是用来声明式的描述一个值依赖了其它的值。当你在模板里把数据绑定到一个计算属性上时，那么当其依赖的任何值发生变化时，Vue 会使该计算属性改变并同时更新 DOM。这个功能非常强大，它可以让你的代码更加声明式、数据驱动并且易于维护。简单来说，计算属性的本质就是辅助插值表达式来进行复杂逻辑运算的。
例如：我们想定义一个type属性，实时的检测data中的count变量，当count大于10的时候显示‘大了’，小于10显示‘小了’，并能够渲染到HTML中。
这时我们就可以用到计算属性。
在使用时，我们可以像访问普通属性一样访问他，我们可以定义一个添加按钮，当count的值发生变化时，计算属性也会同步进行更新。如图：
这时可能有人觉得，同样的场景我们也可以使用函数来实现。那么计算属性与函数的最大区别是什么呢？虽然从结果来看，计算属性与函数的结果完全一致，但是，计算属性是基于其所依赖的存储属性的值的变化而重新计算的，其结果会被缓存。只要依赖属性没有变化，计算属性的逻辑代码就不会重新执行。函数则不同，每次访问其都会重新执行一遍代码。这也是计算属性的优势所在。
上一篇： echarts简单自动切换实现
下一篇： vue功能实现之计算属性
