计算属性的setter

计算属性可定义 setter 来支持写入操作。

默认 getter

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

getter 和 setter

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

使用

<p>{{ fullName }}</p>
<input v-model="fullName" />

当输入框内容变化时，setter 被调用并更新 firstName 和 lastName。

setter 中不应直接修改自身，应修改底层依赖数据。

实际场景

computed: {
  priceText: {
    get() {
      return `¥${this.price.toFixed(2)}`
    },
    set(value) {
      this.price = parseFloat(value.replace('¥', ''))
    }
  }
}

要点总结

• 计算属性默认只读（getter）
• 使用对象形式定义 get 和 set
• setter 用于处理赋值操作
• setter 应修改底层数据而非自身