Vue 可写 computed 的 get 和 set 应怎样配合，为什么 getter 不能改状态？

用单位换算理解读写映射

假设应用以摄氏温度作为权威来源，却允许用户通过华氏温度编辑。get 负责把摄氏值转换为华氏值，set 则反向转换并更新摄氏来源。computed 不需要再独立保存一份华氏 state，否则就会出现两份数值必须不断同步的问题。

下面示例只演示数值映射，采用有限数检查拒绝无效输入。真实输入框可能产生空字符串和正在编辑的格式，通常应在界面适配层先区分草稿与已确认数字，再交给这个数值接口。单位映射不能自动代替完整的表单编辑协议。

import { computed, ref } from 'vue';

const celsius = ref(0);
const fahrenheit = computed({
  get: () => celsius.value * 9 / 5 + 32,
  set: (value: number) => {
    if (Number.isFinite(value)) celsius.value = (value - 32) * 5 / 9;
  }
});

fahrenheit.value = 212;
const afterWrite = { celsius: celsius.value, fahrenheit: fahrenheit.value };
fahrenheit.value = NaN;
const afterInvalid = celsius.value;

归一化和精度需要成为公开约定

有些 setter 会裁剪空格、限制范围或按精度舍入，因此写入某个值后，get 不一定逐字符返回原输入。只要这符合明确业务规则，就不必强求数学上的一一映射。相反，若界面要求保留用户的未完成输入，就应该有独立编辑草稿，而不是让归一化 getter 不断覆盖它。

setter 也不应该写回同一个 computed.value 形成递归。需要更新的是权威 ref、状态字段或明确的父层更新协议。组件 props 为只读时，可写计算常用于把读取映射到 prop、把写入映射到更新事件；它不能直接把 props 的只读约束变成可写权限。

为什么 getter 中的副作用特别难控制

getter 可能因为读取需要而执行，也可能直接复用缓存，执行次数不是用户动作次数。若在其中发送保存请求、修改其它响应式字段或写入当前源状态，普通读取就会启动外部操作，并可能反过来改变自己的依赖，造成循环或难以预测的更新。

异步保存也不宜伪装成一个赋值就已经完成的同步接口。可以让事件或专门动作负责请求、加载、失败与冲突处理，再更新权威状态；computed 负责读取派生展示。setter 中若必须触发命令，也要明确它不提供自动等待、回滚或去重，调用方不能把赋值返回视为远端保存成功。

容易答错的地方

给 computed 赋值后，Vue 会自动缓存这个新值

赋值调用 setter，后续读取仍通过 getter 和真实来源决定。setter 若没有改变相关来源，展示值可能保持不变，这不一定是响应式失效。

getter 里顺便修正非法来源最方便

读取引发状态修改会让依赖计算与业务校验互相纠缠。应该在输入、更新动作或清楚的校验流程中处理非法状态，让 getter 专注于可重复的纯计算。

面试官还会怎么问？

把知识连起来