计算属性只读报错？教你写 Setter 实现双向绑定

计算属性 computed 默认只读，因其本质是基于响应式依赖缓存的 getter 函数；要支持双向绑定，需显式定义 get 和 set 方法，set 中反向更新源数据。

计算属性 computed 默认是只读的，所以直接赋值会报错“Cannot assign to read only property”。这不是 bug，而是 Vue 的设计机制——它要求你显式声明可写的计算属性，才能支持双向绑定（比如用在 v-model 上）。

为什么 computed 默认只读？

Vue 的 computed 本质是基于响应式依赖缓存的 getter 函数。没有 setter 时，它只响应数据变化、不接受外部赋值。强行写入会破坏响应式链路，所以运行时报错。

如何添加 setter 实现可写？

只需把计算属性写成对象形式，显式定义 get 和 set 方法：

• get：返回派生值（必须有）
• set：接收新值，并反向更新源数据（比如修改 data 或 ref）

示例（Vue 3 Composition API）：

const firstName = ref('John')
const lastName = ref('Doe')

const fullName = computed({
  get() {
    return `${firstName.value} ${lastName.value}`
  },
  set(newValue) {
    const parts = newValue.split(' ')
    firstName.value = parts[0] || ''
    lastName.value = parts[1] || ''
  }
})

这样 fullName 就能用于 <input v-model="fullName">，输入时自动拆分并更新 firstName 和 lastName。

常见错误与避坑提示

• 忘记写 get：setter 必须配合 getter，否则无法读取初始值
• 在 set 中修改了错误的响应式源：确保更新的是原始响应式变量（如 ref 或 reactive 的属性），而不是计算出的中间值
• 误用在非响应式数据上：如果源数据不是 ref/reactive，setter 更新不会触发视图刷新
• Vue 2 写法略有不同：使用 computed: { fullName: { get() {}, set() {} } } 对象语法，逻辑一致

什么场景更适合用 computed setter？

适合「一个输入由多个字段组合、同时又需要被整体编辑」的场景，比如：

• 表单中「全名」字段 ↔ 拆分为「姓」+「名」存储
• 「价格」显示为带货币符号的字符串 ↔ 编辑时只输入数字，自动补符号和格式
• URL 路径字符串 ↔ 解析为 protocol、host、path 等字段

注意：若逻辑复杂或涉及异步、校验、副作用，建议改用普通方法 + 监听器（watch），避免把业务逻辑塞进 set 中。