MobX 中 computed 有什么作用？和 reaction 怎么选？

MobX 的 computed 用来声明“由 observable 推导出来的值”，比如过滤后的列表、总价、表单是否有效。它的关键点是自动追踪依赖、懒计算、缓存结果：没人读取时不算，依赖没变时重复读取也不重算。面试回答要强调：computed 应该像纯函数，只负责返回值，不要发请求、写日志或修改状态；这些副作用应该交给 reaction。

追问

computed 为什么能提升性能？

因为它会缓存上一次计算结果。只有依赖的 observable 变化，并且 computed 再次被读取时，MobX 才会重新计算；复杂过滤、排序、聚合都适合放进去。

computed 和普通 getter 有什么区别？

普通 getter 每次访问都执行。computed getter 会被 MobX 管理依赖和缓存，在 observer、autorun、reaction 等响应式上下文中效果最明显。

computed 里能不能写异步请求？

不建议，也不应该。computed 要同步返回派生值；异步请求会产生副作用，应该用 action 改状态，再用 computed 读取状态生成结果。

computed 和 reaction 怎么选？

要“算出一个值”，选 computed；要“值变了以后做一件事”，选 reaction。比如 completedTodos 是 computed，userId 变化后拉接口是 reaction。

项目里有什么坑？

不要在 computed 里返回每次都新建且结构相同的对象，否则可能让观察者误以为结果变了。需要时可以拆小 computed，或使用结构比较配置。

写段代码

javascript
class TodoStore {
  todos = []
  filter = 'all'
  constructor() { makeAutoObservable(this) }

  get visibleTodos() {
    if (this.filter === 'done') return this.todos.filter(t => t.done)
    return this.todos
  }
}