vue 3 中可读写 computed 必须用对象形式声明，含 get 和 set 函数，返回 ref 对象，读写均需 .value；模板中 v-model 可直接用，js 中须 fullname.value；典型用于表单联动，如全名与姓、名双向同步。
Vue 3 中要让 computed 属性可读写，必须用对象形式声明，显式提供 get 和 set 函数；它返回的是一个 ref 对象，读写都需通过 .value 访问。
语法结构：必须用对象写法
不能用箭头函数简写（如 computed(() => ...)），否则只读。正确写法是：
computed({ get() { ... }, set(newValue) { ... } })-
get函数必须返回值，用于响应式读取 -
set函数接收一个参数（即赋的新值），用于反向更新源数据
使用要点：注意 .value 和 ref 源数据
因为 computed 返回的是 ref，所以：
- 模板中绑定
v-model="fullName"可直接用（Vue 自动解包） - 在 JS 中读取要写
fullName.value，赋值也要写fullName.value = '新值' -
get和set内部操作依赖项（如firstName.value）时，也必须带.value
典型场景：表单联动与数据拆分
比如“全名”输入框自动同步到“姓”和“名”两个字段：
-
get拼接firstName.value + ' ' + lastName.value -
set接收用户输入的字符串，用split(' ')拆分并分别赋给firstName.value和lastName.value - 这样
v-model就能双向驱动，无需额外监听或事件处理
注意事项：避免常见错误
容易出错的地方包括：
- 忘记
.value—— 导致读不到值或赋值不生效 - 在
set中修改非响应式变量（如普通对象属性），不会触发更新 - 未确保
get中所有依赖都是响应式的（如ref或reactive的属性） - 在
set里执行异步逻辑后直接 return，可能破坏响应链（建议同步更新源数据）
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
