computed属性可通过对象语法声明getter和setter实现双向绑定；需用{ get() {}, set(value) {} }格式，setter中更新依赖数据以同步源响应式变量。
Vue.js 的 computed 属性默认只提供 getter，但通过显式声明 getter 和 setter，可以实现对计算属性的双向拦截——既响应数据变化，也能被赋值并反向影响源数据。
计算属性如何声明 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 行为一致，且类型推导更友好。
