可写的计算属性需显式定义get和set函数，用于双向绑定中派生逻辑，如拼接字段后支持反向解析、输入校验标准化、封装复杂逻辑；必须用对象语法，结合v-model实现自然双向同步。
计算属性默认是只读的，但 Vue 允许你通过显式定义 get 和 set 函数，把它变成“可写的计算属性”。这在需要双向绑定又需派生逻辑的场景中非常实用，比如把多个字段组合成一个格式化字符串，同时支持用户输入反向解析。
什么时候需要可写的计算属性
当你要：
- 把多个响应式数据拼接、转换后展示（如全名 = 姓 + 名），又希望用户编辑全名时能自动拆分回原始字段；
- 对输入值做校验或标准化（如自动转大写、过滤空格、补前导零）再存入源数据；
- 封装复杂逻辑，让模板保持简洁，同时保持数据流清晰可控。
基础写法：对象形式定义 get 和 set
不能用简写函数形式（fullName() { ... }），必须用对象语法：
computed: {
fullName: {
get() {
return this.firstName + ' ' + this.lastName;
},
set(newValue) {
const parts = newValue.trim().split(' ');
this.firstName = parts[0] || '';
this.lastName = parts[1] || '';
}
}
}
注意：set 方法接收用户输入的新值（如 v-model 绑定触发的值），内部负责解析并更新原始响应式数据（this.firstName、this.lastName）。
set 中的常见处理技巧
实际使用中，set 往往要兼顾健壮性和用户体验：
-
空值/非法输入兜底：检查
newValue是否为字符串，是否为空，避免split报错； -
保留原始格式逻辑：比如
get返回this.price.toFixed(2)，set就该用parseFloat转回数字再赋值； -
不直接修改传入值：
set是响应式入口，所有变更必须作用于this.xxx响应式属性，不能只改局部变量； -
避免无限循环：确保
set内部只更新依赖源数据，不要意外触发当前计算属性的重新求值（例如在set里又给this.fullName赋值）。
结合 v-model 使用最自然
可写的计算属性和 v-model 天然契合：
<input v-model="fullName" placeholder="请输入姓名">
输入时自动调用 set，读取时调用 get，无需额外事件监听或方法。它让表单控件像操作普通数据一样简单，背后却承载了完整的双向转换逻辑。
不复杂但容易忽略：只有定义了 set，计算属性才真正可写；漏掉 set 或写错签名（比如多参数、没命名），v-model 会静默失败或报错。
