Vue.js 计算属性-向日葵屋

# Vue.js 计算属性

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

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

计算属性关键词: computed。

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

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

```vue
<template>
    <div>
        <p>原始字符串: {{ message }}</p>
        <p>计算后反转字符串: {{ reversedMessage }}</p>
    </div>
</template>
<script>
    export default {
        name: 'MyTemplate',
        data() {
            return {
                message: 'Dandelioncloud'
            }
        },
        computed: {
            // 计算属性的 getter
            reversedMessage: function () { //声明了一个计算属性 reversedMessage
                // `this` 指向 vm 实例
                return this.message.split('').reverse().join('')
            }
        }
    }
</script>
```

## computed vs methods

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

```vue
methods: {
  reversedMessage2: function () {
    return this.message.split('').reverse().join('')
  }
}
```

效果图：

![](/images/1593235562900.png)