计算属性的setter是用于拦截对计算属性赋值操作的自定义逻辑，必须与getter同时声明，通过拆解新值并写入原始响应式数据实现双向绑定控制。
Vue 的计算属性默认只有 getter，但你可以通过添加 setter 实现“可写”的计算属性，从而在数据被修改时触发自定义逻辑——这正是实现双向拦截的关键一步。
什么是计算属性的 setter？
计算属性通常用于派生值（比如拼接姓名、格式化日期），它基于响应式依赖自动更新。而 setter 允许你在外部试图给该计算属性赋值时，执行你指定的操作，而不是直接改写值。它不改变原始数据的响应性，而是提供一个“拦截入口”。
注意：必须同时声明 get 和 set，否则会报错；且 setter 中不能直接给计算属性自身赋值（会造成无限循环）。
基础写法：对象形式声明 getter + setter
在 computed 选项中，用对象语法定义：
computed: {
fullName: {
get() {
return this.firstName + ' ' + this.lastName;
},
set(newValue) {
const parts = newValue.split(' ');
this.firstName = parts[0] || '';
this.lastName = parts[1] || '';
}
}
}
- get() 负责读取时返回什么（如拼接后的全名）
-
set(newValue) 接收用户赋的新值（比如
vm.fullName = '张三'），然后拆解并写入原始数据（firstName/lastName） - 这样在模板中用
v-model="fullName"就能实现“看起来双向”，实则由你控制写入逻辑
Vue 3 Composition API 中怎么写？
在 setup() 或 computed() 函数中，同样支持传入 getter/setter 对象：
import { ref, computed } from 'vue'
export default {
setup() {
const firstName = ref('李')
const lastName = ref('四')
const fullName = computed({
get() {
return firstName.value + ' ' + lastName.value
},
set(newValue) {
const parts = newValue.split(' ')
firstName.value = parts[0] || ''
lastName.value = parts[1] || ''
}
})
return { fullName }
}
}
- 和 Options API 逻辑一致，只是写法更函数式
-
computed({ get, set })返回的是一个带.value的 ref-like 响应式对象 - 模板中仍可直接绑定：
实际应用场景：格式化输入 + 数据校验
Setter 不只是“拆字符串”，更是拦截和转换的入口。例如处理价格输入：
- 用户输入
"¥1,234.50"→ setter 清洗为数字1234.5存入priceRaw - get 返回格式化后的显示值（带千分位、货币符号）
- 在 set 里做 isNaN 判断、范围限制、甚至发请求校验库存
- 配合
v-model，就能让表单既友好又可控
这种模式避免了在每个 @input 里重复写清洗逻辑，把转换与校验收敛到计算属性内部。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
