Vue.js 计算属性

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

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

计算属性关键词: computed。

计算属性在处理一些复杂逻辑时是很有用的。

接下来我们看看使用了计算属性的实例：

1. <template>
2. <div>
3. <p>原始字符串: {{ message }}</p>
4. <p>计算后反转字符串: {{ reversedMessage }}</p>
5. </div>
6. </template>
7. <script>
8. export default {
9. name: 'MyTemplate',
10. data() {
11. return {
12. message: 'Dandelioncloud'
13. }
14. },
15. computed: {
16. // 计算属性的 getter
17. reversedMessage: function () { //声明了一个计算属性 reversedMessage
18. // `this` 指向 vm 实例
19. return this.message.split('').reverse().join('')
20. }
21. }
22. }
23. </script>

computed vs methods

可以使用 methods 来替代 computed，效果都是一样的，computed 基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。而使用 methods ，在重新渲染的时候，函数总会重新调用执行。

1. methods: {
2. reversedMessage2: function () {
3. return this.message.split('').reverse().join('')
4. }
5. }

效果图：