Vue 3 computed 怎么为计算属性设置自定义的 setter-Vue.js-PHP中文网

Vue 3 中计算属性支持自定义 setter，需用 computed({ get, set }) 对象语法返回可读写 ref；get 返回派生值，set 接收新值并更新底层响应式数据，二者必须成对出现且操作 ref 须带 .value。

vue 3 computed 怎么为计算属性设置自定义的 setter

Vue 3 中为计算属性添加自定义 setter，核心是用 对象语法 调用 computed({ get, set })，返回一个可读写的 ref；setter 不是直接改计算属性本身，而是拦截赋值动作，把新值拆解或转换后写入底层响应式数据。

必须用对象形式声明 get 和 set

不能只写函数式写法（如 computed(() => ...)），那样只有 getter。要启用 setter，必须传入含两个方法的对象：

get()：返回派生值，比如拼接字符串、格式化数字
set(newValue)：接收外部赋的值（如 fullName.value = '王五' 或 v-model="fullName" 触发的值），在里面手动更新原始 ref 或 reactive 字段
get 和 set 必须成对出现，缺一不可，否则会报错

注意 ref 值的操作方式

在 Composition API 中，所有响应式变量都是 ref，读写都必须带 .value：

get 里读取：要用 firstName.value、count.value
set 里写入：也要用 firstName.value = ...、count.value = newValue / 2
错误示例：firstName = ...（漏掉 .value）会导致无法触发响应式更新

典型使用场景和写法

常见用途包括表单联动、单位换算、字段拆分等。例如“全名”双向绑定到“姓”和“名”：

Springboot Vue Builder

从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。

下载

const firstName = ref('李')
const lastName = ref('四')
const fullName = computed({
  get() {
    return `${firstName.value} ${lastName.value}`
  },
  set(newValue) {
    const [first = '', last = ''] = newValue.split(/\s+/).filter(Boolean)
    firstName.value = first
    lastName.value = last
  }
})

这样在模板中用就能实现输入全名自动拆分，修改 firstName/lastName 也会实时更新 fullName 显示。