vue Computed setter

在 Vue 中，计算属性（Computed）是一种可以根据现有数据计算出其他数据的属性。计算属性是基于它所依赖的数据进行缓存的，只有当计算属性依赖的数据发生改变时，才会重新计算。

如果你需要给计算属性赋值，那么你需要在计算属性中定义setter方法。setter方法接受一个参数，这个参数是你要设置的新值，你可以在setter方法中处理这个新值，或者把这个新值传给其他的组件数据。

下面是一个计算属性（带setter方法）的例子：

<template>
  <div>
    <p>{{ fullName }}</p>
    <input v-model="firstName">
    <input v-model="lastName">
  </div>
</template>

<script>
export default {
  data() {
    return {
      firstName: 'John',
      lastName: 'Doe'
    }
  },
  computed: {
    fullName: {
      get() {
        return this.firstName + ' ' + this.lastName
      },
      set(newValue) {
        const names = newValue.split(' ')
        this.firstName = names[0]
        this.lastName = names[1]
      }
    }
  }
}
</script>

在上面的例子中，我们定义了一个fullName计算属性，它由firstName和lastName两个数据计算得来。我们同时定义了setter方法，当我们在input框中输入新的fullName时，setter方法会被调用，把新的fullName解析成firstName和lastName，然后更新这两个数据。

需要注意的是，如果你要使用计算属性的setter方法，那么你必须同时定义getter方法，否则Vue会抛出错误提示。