模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。

在模板中放入太多的逻辑会让模板过重且难以维护。例如：

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

此时应当使用计算属性。

计算属性是基于它们的响应式依赖进行缓存的。

只在相关响应式依赖发生改变时它们才会重新求值。

7-1.计算属性的 setter

默认情况下，我们只会使用计算属性的 getter：

computed: {
  fullName () {
    return this.firstName + this.lastName
  }
}

但根据实际情况，也可以提供一个 setter:

computed: {
  fullName: {
    get () {
      return this.firstName + this.lastName
    },
    set (value) {
      const nameList = value.split(' ')
      this.firstName = nameList[0]
      this.lastName = nameList[1]
    }
  }
}