Vue 3 中计算属性支持自定义 setter，需用 computed({ get, set }) 对象语法返回可读写 ref；get 返回派生值，set 接收新值并更新底层响应式数据，二者必须成对出现且操作 ref 须带 .value。
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
}
})
这样在模板中用 <input v-model="fullName"> 就能实现输入全名自动拆分，修改 firstName/lastName 也会实时更新 fullName 显示。
它支持 v-model 直接绑定
因为返回的是一个具有 .value 的 ref，并且有合法的 set 方法，所以可直接用于 v-model，无需额外封装：
-
<input v-model="fullName">→ 输入触发 set -
<custominput v-model="fullName"></custominput>→ 子组件也能按标准 v-model 协议通信 - 本质是 Vue 检测到该 ref 有 set 方法，就走“可写 ref”逻辑
