2.3　Vue计算属性

一般在模板语法内使用表达式非常便利，模板也只用于简单的运算，当表达式过于复杂时，在模板中放入太多逻辑会让模板过重且难以维护。为此，Vue提供了计算属性computed。

2.3.1　计算属性

引用了计算属性computed后，就可将复杂的逻辑放入计算中进行处理，同时computed有缓存功能，可防止复杂计算逻辑多次调用引起的性能问题。下面看看一个没有用计算属性的例子，比如要结算图书总价，代码可以这样写。

但如果商城做活动，图书打折，需要修改代码为：

如果再加上运费总价，则计算表达式更复杂：

随着需求的变化，计算总价的表达式越来越复杂，视图层（view）的逻辑越来越复杂，代码会越来越臃肿并难以维护，试一试计算属性怎么做。例2-7演示了计算属性可以简化view。

【例2-7】演示计算属性。

通过以上代码可发现，计算属性可以包含很多繁重的逻辑，最终返回需要的值。通过计算属性的使用，view层的代码会变得非常精简，且容易维护。

对于计算属性的setter和getter，一般的计算属性默认只是getter，不过在需要时也可以提供一个setter，在例2-8中计算getter的函数将用作属性vm.fullName的setter。

【例2-8】演示计算属性setter。

在浏览器控制层输入vm.fullName="menu Bar"，再输出vm.firstName是menu，vm.lastName是Bar。setter和getter的区别在于，setter是当computed这个属性的值变化时所触发的。

2.3.2　计算属性与methods的区别

在例2-8中演示计算属性时，是使用computed实现总价结算的，下面使用methods来实现同样功能，对比两者的区别，如例2-9所示。

【例2-9】演示methods。

可以将计算总价定义为一个方法而不是一个计算属性。两种方式的最终结果确实是完全相同的。然而，不同的是计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值。这就意味着只要book的属性还没有发生改变，多次访问totalPrice计算属性会立即返回之前的计算结果，而不必再次执行函数。

相比之下，每当触发重新渲染时，调用方法将总是再次执行函数。为什么需要缓存？假设有一个性能开销比较大的计算属性，需要遍历一个巨大的数组并做大量的计算，然后可能还有其他的计算属性依赖于它，如果没有缓存，将不可避免地多次执行。methods没有缓存，所以每次访问都要重新执行。如果你不需要缓存功能，就使用methods。

下面总结一下计算属性的特点。

（1）计算属性使数据处理结构清晰。

（2）依赖于数据，若数据更新，则处理结果自动更新。

（3）计算属性内部this指向vm实例。

（4）在模板调用时，直接写计算属性名即可。

（5）常用的是getter方法，用于获取数据，也可以使用setter方法改变数据。

（6）相较于methods，不管依赖的数据是否改变，methods都会重新计算，但是依赖数据不变的时候，computed从缓存中获取，不会重新计算。