前端学习——vue计算属性

学习或使用过vue的人，应该都听过计算属性，那么到底什么是计算属性呢，为什么会有计算属性呢？ 

如图所示，message是vue中常见的变量写法，但现在需要对message进行转换处理，这时使用到了split，reverse和join三个方法。

这还是比较简单的处理方式，如果需要对message进行更加复杂的处理怎么办？

所以，为了解决这个问题，所以就有了计算属性的出现，说白了就是把对message的处理提取成一个方法，这样可以使代码更加模块化，更容易看懂。

而message是vue中的一个属性，而对message这个属性进行处理就是在计算出message处理的结果，所以这个不存在的属性——message属性的计算结果就叫计算属性。

所以说到底计算属性和普通属性都属于vue中的属性，使用时业可以像普通属性一样，但区别就是计算属性是一个计算处理的，没有实际存在的属性。

所以，当计算属性中用到的属性(message)改变时，计算属性的值也会改变。如下图所示，当message的值改变时，计算属性reverMessage的值才会改变。

这时可能会有人说，之间使用methods不是可以达到同样的效果吗？

事实上，计算属性能做到的事，方法也可以做到，但计算属性相对方法唯一的不同，也是优点就是计算属性有缓存，当计算属性中用到到属性的值没有改变时，计算属性只会计算一次，也就是调用一次，而不是像方法一样，每次都调用。

虽然页面上展示了两次revekrseMessage，但conole中只打印了一次计算属性调用。

计算属性除了默认的get方法之外，还有一个set方法，可以通过set方法给计算属性设置新的值。不过计算属性大部分都是用来展示数据，所以很少用到set功能。