Vue计算属性怎么写 Setter：教你如何实现组件数据的双向拦截

计算属性的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 响应式对象
• 模板中仍可直接绑定：<input v-model="fullName">

实际应用场景：格式化输入 + 数据校验

Setter 不只是“拆字符串”，更是拦截和转换的入口。例如处理价格输入：

• 用户输入 "¥1,234.50" → setter 清洗为数字 1234.5 存入 priceRaw
• get 返回格式化后的显示值（带千分位、货币符号）
• 在 set 里做 isNaN 判断、范围限制、甚至发请求校验库存
• 配合 v-model，就能让表单既友好又可控

这种模式避免了在每个 @input 里重复写清洗逻辑，把转换与校验收敛到计算属性内部。