MobX computed未修改observable却触发变更警告的原因是什么

问题原因 #

这个警告的触发主要有三种常见可能性，按概率从高到低排列：

1. 构造函数执行顺序错误：你当前的代码是先给isSignedIn赋值，再调用makeAutoObservable。makeAutoObservable的作用是重写实例的属性描述符，将普通属性转换为MobX的响应式属性、getter转换为computed计算属性。如果在调用makeAutoObservable之前，有任何逻辑（包括构造函数内的其他方法调用、甚至TS编译生成的隐含逻辑）访问了isSignedIn或者itIsSafeToFetch getter，此时的属性还未被MobX劫持，后续MobX完成响应式转换后，会将属性值的变化误判为非action下的非法修改，触发警告。
2. 代码笔误：检查你实际运行的代码中，getter内的判断是否误把全等运算符===写成了赋值运算符=，相当于在getter中直接修改isSignedIn的值，必然会触发严格模式警告。
3. 自动标记错误：特殊情况下makeAutoObservable可能会将getter错误标记为普通方法而非computed，导致getter内的响应式属性访问触发异常检测。

解决方案 #

• 调整构造函数执行顺序，优先调用makeAutoObservable，再给属性赋值，这是MobX官方推荐的写法：

private constructor(
  isSignedIn: boolean,
) {
  makeAutoObservable(this);
  this.isSignedIn = isSignedIn;
}

• 手动指定getter的类型为computed，避免自动标记错误：

import { makeAutoObservable, computed } from "mobx";

// 构造函数内调用时添加配置
makeAutoObservable(this, {
  itIsSafeToFetch: computed
});

• 检查tsconfig.json配置，确保开启useDefineForClassFields: true，编译target不低于ES2020，避免TS对类属性的编译逻辑和MobX代理逻辑冲突。

内容的提问来源于stack exchange，提问作者Phelizer