Vue 3 中为计算属性设置自定义 setter，需用对象语法声明 computed 并显式提供 get 和 set 函数；get 返回读取值，set 接收新值并更新底层响应式数据，不可在 set 中赋值自身以避免循环。

Vue 3 中为计算属性设置自定义 setter，核心是用 对象语法声明 computed，并显式提供 get 和 set 函数；它不是给计算属性“赋值”，而是拦截赋值行为，转而更新底层响应式数据。

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

不能只写函数式写法（如 fullName() { ... }），那默认只有 getter。要启用 setter，必须写成键值对对象：

• computed: { propName: { get() { ... }, set(newValue) { ... } } }
• get 必须返回一个值，决定读取时显示什么
• set 接收一个参数（即外部传入的新值），在里面处理逻辑、更新源数据
• 两者缺一不可，否则会报错或静默失效

在 setup() 中正确使用 ref + computed({ get, set })

组合式 API 下，computed 返回的是一个 ref 对象，读写都需通过 .value：

Springboot Vue Builder

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

下载

• 声明：const fullName = computed({ get() { return firstName.value + ' ' + lastName.value }, set(val) { const [first, last] = val.split(' '); firstName.value = first || ''; lastName.value = last || ''; } });
• 模板中可直接用于 v-model="fullName"，输入触发 set，读取触发 get
• 脚本中读取写法：console.log(fullName.value)；赋值写法：fullName.value = '王五'

setter 里不能直接改计算属性自身

这是常见错误：在 set 函数里又给当前 computed 赋值，会导致无限循环。

• ❌ 错误：set(newVal) { this.fullName = newVal; }（this 指向不对，且语义错误）
• ❌ 更危险：set(newVal) { fullName.value = newVal; }（递归调用自身 set）
• ✅ 正确：只操作它所依赖的原始响应式变量，比如 firstName.value、product.value.basePrice 等

适合 setter 的典型场景

不是所有计算属性都需要 setter，它适用于需要“反向推导”或“格式转换控制”的场合：

• 表单封装：把多个字段聚合为一个 v-model 接口（如全名 ↔ 姓+名）
• 数值联动：售价 = 基础价 × (1 − 折扣)，修改售价时反推基础价或折扣率
• 格式化输入：用户输入 ISO 时间字符串，setter 自动解析并更新 year/month/day 响应式字段
• 权限映射：将 role 字符串映射为 hasAdmin / hasEditor 布尔值，setter 控制角色变更逻辑

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！