Question

Vue的计算属性

Answer 1

有时候我们可能需要在 {{}} 里添加一些需要计算再展示出来数据
例如：在页面中展示学生的成绩总分和平均分：

以上是通过在 {{}} 里运算，得出总分和平均分
虽然也能解决问题，但是特别不清晰，特别是当运算比较复杂的时候
那怎么办呢？
了解一点的，应该会想到 methods ，
没错，确实 methods 也可以！但事实上， vue 给我们提供了一个更好的解决方案叫 计算属性
计算属性是 vue 实例中的一个配置选项： computed
通常里面都是一个个计算相关的函数，函数里头可以写大量的逻辑，最后返回计算出来的值
即我们可以把这些计算的过程写到一个计算属性中去，然后让它动态的计算。

如上，
计算属性一般就是用来通过其他的数据算出一个新数据，而且它有一个好处就是，它把新的数据缓存下来了，当其他的依赖数据没有发生改变，它调用的是缓存的数据，这就极大的提高了我们程序的性能 。而如果写在 methods 里，数据根本没有缓存的概念，所以每次都会重新计算。这也是为什么这里我们没用 methods 的原因
以上就是 Vue 的计算属性的基本用法!