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

时间：2026-03-18

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

计算属性 computed 报错“只读”怎么办？教你如何编写 Setter 实现双向绑定

计算属性 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。