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

作者：袖梨 2026-06-17

计算属性的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 }  }}