如何利用Vue.js的computed属性实现带有getter和setter的双向拦截功能？

本文共计687个文字，预计阅读时间需要3分钟。

Vue.是一个用于构建用户界面的渐进式JavaScript框架。它不仅易于上手，而且能够帮助开发者高效地开发复杂的应用程序。Vue的核心库只关注视图层，易于与其他库或已有项目整合。它的数据绑定和组件系统让开发者能够以声明式方式构建界面，提高开发效率。

计算属性如何声明 setter

当 computed 选项是一个对象而非函数时，可分别定义 get 和 set 方法。setter 接收一个参数（即被赋的新值），常用于解析、校验或反向更新原始响应式数据。

• 必须使用对象语法：{ get() {}, set(value) {} }
• setter 中不能直接修改 getter 依赖的响应式变量以外的数据，否则可能破坏响应链
• 若仅需读取，用函数语法更简洁；需双向操作时才用对象语法

典型应用场景：表单联动与格式化输入

例如将用户输入的「全名」字符串拆解为 firstName 和 lastName，同时允许通过修改 fullName 计算属性来批量更新两者：

data() { return { firstName: 'John', lastName: 'Doe' } }, computed: { fullName: { get() { return `${this.firstName} ${this.lastName}` }, set(value) { const parts = value.trim().split(/\s+/) this.firstName = parts[0] || '' this.lastName = parts[1] || '' } } }

这样在模板中绑定 v-model="fullName" 就能实现输入框与两个字段的双向同步。

立即学习“前端免费学习笔记（深入）”；

注意事项与常见陷阱

setter 不会自动触发视图更新，它只负责写入逻辑；后续依赖该计算属性的 DOM 或其他响应式依赖，仍由 Vue 的响应系统自动更新。

• 避免在 setter 中执行异步操作（如 API 调用），因 v-model 赋值是同步的，异步结果无法及时反馈到视图
• 不要在 setter 中再次读取当前计算属性（如 this.fullName），会造成无限循环
• Vue 3 中 Composition API 同样支持：用 computed({ get, set }) 创建可写的 ref

Vue 3 中的等效写法（Composition API）

在 setup() 中使用 computed 函数传入配置对象：

import { ref, computed } from 'vue' const firstName = ref('John') const lastName = ref('Doe') const fullName = computed({ get() { return `${firstName.value} ${lastName.value}` }, set(value) { const parts = value.trim().split(/\s+/) firstName.value = parts[0] || '' lastName.value = parts[1] || '' } })

该写法与 Options API 行为一致，且类型推导更友好。