Vue Options API 中 computed 支持 get/set 对象语法，用于响应式读写封装；get 返回计算值，set 同步更新依赖数据，适用于字段聚合、表单双向绑定等场景。
Vue Options API 中，computed 选项支持为计算属性定义 getter 和 setter，适用于需要响应式读写、且逻辑需封装的场景（比如格式化输入、双向绑定衍生值）。
如何声明带 getter 和 setter 的 computed 属性
在 computed 对象中，不传函数，而是传一个包含 get 和 set 方法的对象：
- get：必须返回值，用于读取时计算并返回结果
- set：接收一个参数（即赋给该属性的新值），用于处理写入逻辑
- 不能在
set中直接修改get依赖的响应式数据以外的状态（否则可能破坏响应性）
典型使用示例：姓名格式化
假设你有一个 firstName 和 lastName，想通过 fullName 统一读写：
export default {
data() {
return {
firstName: '张',
lastName: '三'
}
},
computed: {
fullName: {
get() {
return `${this.firstName} ${this.lastName}`.trim()
},
set(newValue) {
const parts = newValue.split(' ')
this.firstName = parts[0] || ''
this.lastName = parts[1] || ''
}
}
}
}
这样在模板中可双向绑定：<input v-model="fullName">，输入“李四”会自动拆分并更新 firstName 和 lastName。
立即学习“前端免费学习笔记（深入）”；
注意事项和常见陷阱
-
set中不要调用异步操作或产生副作用（如发请求、改 DOM），它只应同步更新响应式源数据 - 如果
get依赖的数据未定义，set执行时可能报错，建议在set中做基础校验（如if (!newValue)） - 避免在
set中修改其他 computed 属性或触发额外的响应式更新链，以防循环依赖 - 不推荐在
set中直接修改this.$data或非响应式对象，应始终操作data返回的响应式字段
什么时候该用带 setter 的 computed
- 需要把多个底层字段“聚合”成一个可读写的接口（如日期字符串 ↔ 年/月/日对象）
- 表单控件需双向绑定一个经过转换的值（如百分比输入框 ↔ 小数数值）
- 封装复杂格式化逻辑，同时保持模板简洁（避免在
v-model中写内联表达式）
