Vue computed 为什么不能直接赋值

在 Vue 里，computed 默认是“只读的派生值”。它可以根据 ref 或 reactive 自动重新计算，但没有默认的写入口，所以直接写 total.value = 10 会出现只读警告。修复思路很简单：能改源状态就改源状态；确实需要把一个输入值拆回多个字段时，再显式提供 setter。

把 computed 当成由源状态计算出的快照，而不是普通变量。默认情况下修改它没有意义；应该修改 getter 依赖的源字段，让 Vue 重新计算。

为什么给 computed 赋值会出现只读警告

下面的写法看起来像在修改一个普通变量，实际上修改的是计算结果：

import { ref, computed } from 'vue'

const price = ref(20)
const count = ref(2)
const total = computed(() => price.value * count.value)

total.value = 100 // computed is readonly

total 没有独立存储的“真实值”，它只是由 price 和 count 推导出的结果。Vue 会跟踪这两个响应式依赖，在它们变化时重新计算 total。直接给 total.value 赋值，既不能决定源字段如何变化，也无法保证下一次重算仍然得到 100，因此默认 computed 只提供 getter。

可以用下面这张表快速判断修改位置：

先确认你改的是派生值还是源状态

排查时沿着 getter 往里找。比如购物车数量应该由用户输入改变，而总价只是结果，就把事件绑定到 count：

function increase() {
  count.value += 1
}

function updateCount(next) {
  const value = Number(next)
  if (Number.isInteger(value) && value >= 0) {
    count.value = value
  }
}

模板继续读取 total，不需要手动同步它：

{{ total }}
+1

这里的判断点是：事件改变了源状态，Vue 才有明确的响应式依赖可以重新计算。若把异步请求、日志上报或 DOM 修改塞进 getter，问题会更难定位；副作用应放在事件处理函数或 watch 中。

需要双向写入时如何定义 setter

有些场景希望组件外部只操作一个值，例如表单输入完整姓名，但真实状态仍然分成姓和名。这时可以显式创建 writable computed：

import { ref, computed } from 'vue'

const firstName = ref('Lin')
const lastName = ref('Chen')

const fullName = computed({
  get() {
    return `${firstName.value} ${lastName.value}`
  },
  set(value) {
    const [first = '', last = ''] = value.trim().split(/\s+/, 2)
    firstName.value = first
    lastName.value = last
  }
})

fullName.value = 'Ming Zhao' // 进入 setter，更新两个源字段

getter 负责把两个字段组合成展示值，setter 负责把外部输入拆回源字段。这样写入的是一个有明确语义的接口，而不是强行修改计算快照。setter 还应处理空值、分隔符和非法输入；如果输入规则复杂，可以先校验，再决定是否回写。

修改后怎么确认响应式链路没有被破坏

修复后不要只看警告消失。按下面的顺序复查更可靠：

1. 源字段变化时，模板读取的 computed 是否同步更新。
2. 通过 writable computed 写入后，源字段是否得到预期值。
3. 空字符串、额外空格和不完整输入是否有明确处理结果。
4. getter 是否仍是纯计算，副作用是否已移到事件函数或 watch。

如果新 setter 造成了错误回写，回滚也很直接：先删除对 computed 的赋值，恢复为直接修改源字段；如果业务确实需要一个统一输入，再缩小 setter 的职责，只保留校验和源字段更新。Vue 官方的 computed 说明也强调，派生值应视为临时快照，源状态变化才会触发下一次计算。

相关问题

computed 和 method 都能算值，为什么还要用 computed？

computed 会基于响应式依赖缓存结果，依赖未变化时重复读取不会重新执行 getter；method 则会在调用时执行。需要缓存的派生计算更适合 computed。

可以在 computed getter 里发请求吗？

不建议。getter 应只做纯计算并返回结果。请求、日志、DOM 操作等副作用应放到事件处理函数或 watch 中。

模板里为什么不用写 computed.value？

Composition API 返回的 computed ref 在模板中会自动解包，所以可以直接写 {{ total }}；在 JavaScript 代码里仍然要通过 total.value 读取或写入。

参考：Vue.js 官方 Computed Properties 文档。