计算属性，方法和监听器

1，计算属性

模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。例如：

<div id="example">
  {{ message.split('').reverse().join('') }}
</div>

在这个地方，模板不再是简单的声明式逻辑。你必须看一段时间才能意识到，这里是想要显示变量message的翻转字符串。当你想要在模板中多次引用此处的翻转字符串时，就会更加难以处理。

所以，我们想要的是模板中就显示内容，不做任何复杂的计算（或者逻辑），这个时候就可以用到计算属性

计算属性是有一个缓存的，即 即便你重新渲染组件，但是计算属性的值没有发生改变时，就不会去执行

这个改变基于计算属性中的被计算值最后是否发生，比如：

页面刚刷新完的时候，计算属性会运行一次

改变data中其他属性，或者计算属性中的被计算值的最后结果没有发生改变都不会触发计算

2，接下来用方法来实现这个效果

先运行一次

当我改变除了计算属性用的值外的值，发现方法会随着组件的重新渲染再次执行一次，这样就浪费了效率

3，用监听器来实现

当我们改变data中的其余属性时，不会触发我们定义的监听器，因为监听器定义在firstName和lastName上

使用监听器方法，我们同样有一个缓存机制，但是这段代码相对于计算属性来说，已经是很长的了，所以当我们即能够使用计算属性和监听器方法时，请优先使用计算属性