计算属性报错“只读”怎么办？教你利用 Setter 实现数据的双向拦截-Vue.js-PHP中文网

计算属性默认只读，需显式定义get和set方法实现可写；get返回派生值，set接收新值并更新源数据，从而支持双向绑定与响应式联动。

计算属性报错“只读”怎么办？教你利用 setter 实现数据的双向拦截

计算属性默认是只读的，当你尝试给它赋值时，Vue 会抛出 TypeError: Cannot set property xxx of #<object> which has only a getter</object> 这类错误。这不是 bug，而是设计使然——但 Vue 确实支持通过 setter 让计算属性“可写”，从而实现数据的双向拦截与响应式联动。

为什么计算属性默认只读？

计算属性（computed）本质是基于响应式依赖的缓存 getter 函数。它没有内置的写入逻辑，所以直接赋值会失败。只有显式定义了 set，Vue 才知道“当有人给这个计算属性赋值时，该做什么”。

如何正确添加 setter？

必须使用对象语法（而非函数语法）声明计算属性，并完整写出 get 和 set 方法：

get：返回派生值（必填）
set：接收新值，内部应更新源数据（如 data 或 ref），不能直接修改计算属性自身

示例（Vue 2 / Vue 3 Options API）：

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

在 Vue 3 Composition API 中，用 computed 函数配合 getter/setter 对象：

const fullName = computed({
  get() {
    return firstName.value + ' ' + lastName.value;
  },
  set(value) {
    const [first, last] = value.split(' ');
    firstName.value = first || '';
    lastName.value = last || '';
  }
});

常见错误与避坑点

只写了 set 没写 get → 报错：“Computed property was assigned to but it has no setter”
在 set 中试图直接改 this.fullName → 无限递归或静默失败
源数据不是响应式的（比如普通对象属性未在 data 中声明）→ setter 生效但视图不更新
对 ref 使用 computed 时忘了加 .value → 值无法读取或写入