计算属性

一、计算属性

vue下的computed选项中可以加入函数，这样我们就不用在标签上放入过于复杂的表达式，可以将表达式变成函数放进计算属性中，例如：

我们可以发现，计算属性与方法（methods）都可以达到相同的目的，那么他们之间有什么区别呢？

1、计算属性，计算属性是基于响应式而进行缓存的，也就是他依赖的响应式数据发生改变时才会重新计算结果，而依赖如果没有发生改变，那么计算属性的结果也不会发生改变，例如：

这个计算结果就不会在发生改变，因为Date.now()不是响应式依赖；

计算属性默认只有getter，我们也可以设置一个setter，一个计算属性实例：

setter会在上面get运行完后运行，并且传入的新参数是上面get return返回的值。

计算属性不支持异步操作，所有在针对需要异步修改值得情形，我们需要使用侦听（watch）对值进行侦听修改。

2、方法（methods），方法在每一次被调用时都会重新执行函数，相较计算属性而言，会消耗更多的性能，例如要遍历一个巨大的数组，计算属性会将结果缓存下来，下一次再调用只需要给出缓存结果，而方法每一次调用都要重新遍历这个数组。

3、侦听属性（watch），watch也可以侦听响应式数据的变化，例如：

但是侦听只能侦听单独的一个property，而计算属性可以同时侦听多个property的变动。

侦听属性支持异步操作，并且在开销较大时，也应该使用侦听属性，避免计算属性的缓存占用内存空间过大。