双向计算属性指既能通过{{ fullname }}读取（触发getter）、又能通过fullname = '张三'赋值（触发setter）的计算属性，需手动定义get和set方法实现响应式映射，适用于格式化显示与输入解析场景。
Vue 的计算属性默认只提供 getter，但通过显式定义 getter 和 setter，可以实现双向绑定逻辑——即既能读取派生值，也能通过赋值反向更新源数据。
什么是双向计算属性
双向计算属性指一个计算属性既可以通过 {{ fullName }} 读取（触发 getter），也可以通过 fullName = '张三' 赋值（触发 setter）。它不是 Vue 的“内置双向语法”，而是开发者手动实现的响应式映射逻辑，常用于格式化显示 + 解析输入的场景，比如日期字符串、全名拆分、单位换算等。
在 Options API 中定义 getter/setter
在 computed 选项中，不写函数，而是写一个对象，包含 get 和 set 方法：
computed: {
fullName: {
get() {
return `${this.firstName} ${this.lastName}`.trim();
},
set(newValue) {
const parts = newValue.split(' ');
this.firstName = parts[0] || '';
this.lastName = parts[1] || '';
}
}
}
- getter 返回派生值（如拼接后的全名）
- setter 接收新值（如用户输入的字符串），解析后写入原始响应式数据（this.firstName 和 this.lastName）
- 注意：setter 中不能直接修改计算属性本身，只能更新其依赖的响应式源数据
在 Composition API 中使用 computed 函数
Vue 3 的 computed 支持传入一个含 get 和 set 的对象：
import { ref, computed } from 'vue'
const firstName = ref('')
const lastName = ref('')
const fullName = computed({
get() {
return `${firstName.value} ${lastName.value}`.trim()
},
set(value) {
const parts = value.split(' ')
firstName.value = parts[0] || ''
lastName.value = parts[1] || ''
}
})
- 必须用 .value 访问和赋值 ref
- 与 Options API 逻辑一致：getter 返回组合结果，setter 拆解并更新底层 ref
- 模板中仍可直接使用 {{ fullName }} 或 v-model="fullName"
适用场景与注意事项
双向计算属性适合“单向派生、反向解析”类需求，但需谨慎使用：
- 确保 setter 的解析逻辑健壮（如空格分割可能出错，建议加校验或正则）
- 避免在 getter 中产生副作用，在 setter 中避免无限循环（例如 setter 又触发自身 getter）
- 复杂解析逻辑建议封装成独立函数，提升可读性和复用性
- 不是所有场景都需要双向：若只是展示，用普通 getter 即可；若需完整控制输入，v-model + 自定义事件可能更清晰
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
