vue 计算属性

Vue.js 中的计算属性是一种可以根据现有数据计算出新数据的属性。它们通常被用于模板中，以便在模板中展示数据的衍生属性。计算属性会根据它所依赖的数据进行缓存，只有当依赖的数据发生变化时才会重新计算。

计算属性可以在 Vue 实例的 `computed` 选项中定义，它们的定义方式类似于 methods 方法：

var vm = new Vue({
  data: {
    message: 'Hello'
  },
  computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
  }
})

在模板中使用计算属性：

<div>
  <p>原始消息: {{ message }}</p>
  <p>反转消息: {{ reversedMessage }}</p>
</div>

此时，当我们改变 `message` 的值时，`reversedMessage` 会自动更新，而无需手动重新计算。

需要注意的是，计算属性默认只有 getter ，不具备 setter 。如果需要在计算属性中进行双向绑定，可以使用带有 `get` 和 `set` 方法的计算属性。例如：

var vm = new Vue({
  data: {
    firstName: 'John',
    lastName: 'Doe'
  },
  computed: {
    fullName: {
      // 计算属性的 getter
      get: function () {
        return this.firstName + ' ' + this.lastName
      },
      // 计算属性的 setter
      set: function (newValue) {
        var names = newValue.split(' ')
        this.firstName = names[0]
        this.lastName = names[names.length - 1]
      }
    }
  }
})

此时，在模板中使用 `v-model` 来绑定 `fullName`，就可以实现对 `firstName` 和 `lastName` 的双向绑定。如下所示：

<div>
  <input v-model="fullName">
</div>