Vue.js组合式API中computed支持getter/setter双向拦截，必须用{ get() {}, set(value) {} }对象语法声明；函数写法只读，setter需更新底层响应式源数据以触发重新计算。
Vue.js 组合式 API 中的 computed 支持 getter 和 setter，但必须显式声明为对象形式，不能用简写的函数写法。它本质不是“直接赋值”，而是通过 setter 修改其依赖的响应式数据，从而触发 getter 重新计算 —— 这是双向同步的关键逻辑。
必须用对象语法声明
只有写成 { get() {}, set(value) {} } 形式，computed 才具备可写能力。函数写法（如 computed(() => ...)）只读，强行赋值会报错或静默失败。
- get 方法负责返回计算结果，可读取 ref 或 reactive 数据
- set 方法接收一个参数（习惯叫
value或newValue），内部只能修改原始响应式变量（如ref.value或reactive的属性） - 不能在 setter 里读取当前 computed 的值（如
fullName.value），否则可能造成无限循环
正确访问和更新响应式源数据
Composition API 中，ref 需通过 .value 读写，reactive 对象则直接操作属性。setter 的作用就是把传入的新值“拆解”并同步到这些底层响应式变量上。
- 例如 fullName 由 firstName 和 lastName 拼接而来，setter 就该把输入字符串按空格分割，分别赋给
firstName.value和lastName.value - 若依赖的是 reactive 对象（如
user.name），setter 中就应更新user.name = value，而不是试图改fullName自身 - 所有修改都必须落在响应式系统追踪的源头上，否则视图不会更新
常见使用场景
可写 computed 适合封装“格式化输入/输出”的双向交互，比如表单字段联动、URL 参数解析、数组与字符串互转等。
立即学习“前端免费学习笔记（深入）”；
- 输入框绑定
fullName.value，用户输入 “张三|北京” → setter 解析并设name.value = "张三"、city.value = "北京" - 列表显示为逗号分隔字符串，编辑时输入 “a,b,c” → setter 调用
list.value = ["a","b","c"] - 时间戳转日期字符串展示，同时允许用户输入 ISO 格式日期 → setter 解析后存为毫秒数
注意事项与陷阱
它不是魔法，而是一套明确的数据流向约定。用不好容易引发副作用或响应失效。
- setter 中避免调用异步操作或产生新响应式对象，应专注更新已有依赖项
- 不要在 getter 中执行副作用（如发请求、修改 DOM），它只应做纯计算
- 如果依赖多个 ref，setter 更新其中一部分时，要确保其他依赖状态仍合理，防止 getter 报错
- 调试时可加 console.log 查看 get/set 触发时机，确认是否按预期执行
