MobX 6 有哪些主要变化和新特性？

MobX 6 是 MobX 的一个重大版本更新，引入了许多重要的变化和新特性。以下是 MobX 6 的主要变化：

1. 强制使用 Action

MobX 5 及之前

javascript
class Store {
  @observable count = 0;
  
  increment() {
    this.count++; // 可以直接修改
  }
}

MobX 6

javascript
class Store {
  @observable count = 0;
  
  @action // 必须使用 action
  increment() {
    this.count++;
  }
}

在 MobX 6 中，所有状态修改都必须在 action 中进行。这是为了提供更好的可预测性和调试体验。

2. 装饰器 API 的变化

MobX 5

javascript
import { observable, computed, action } from 'mobx';

class Store {
  @observable count = 0;
  @computed get doubled() {
    return this.count * 2;
  }
  @action increment() {
    this.count++;
  }
}

MobX 6

javascript
import { makeObservable, observable, computed, action } from 'mobx';

class Store {
  count = 0;
  
  constructor() {
    makeObservable(this);
  }
  
  get doubled() {
    return this.count * 2;
  }
  
  increment() {
    this.count++;
  }
}

MobX 6 推荐使用 makeObservable 而不是装饰器，但装饰器仍然支持。

3. makeAutoObservable 的引入

MobX 6 引入了 makeAutoObservable，它可以自动推断属性的类型：

javascript
import { makeAutoObservable } from 'mobx';

class Store {
  count = 0;
  firstName = 'John';
  lastName = 'Doe';
  
  constructor() {
    makeAutoObservable(this);
  }
  
  get fullName() {
    return `${this.firstName} ${this.lastName}`;
  }
  
  increment() {
    this.count++;
  }
}

makeAutoObservable 会自动：

• 将 getter 标记为 computed
• 将方法标记为 action
• 将字段标记为 observable

4. 配置 API 的简化

MobX 5

javascript
import { configure } from 'mobx';

configure({
  enforceActions: 'always',
  useProxies: 'always',
  computedRequiresReaction: true
});

MobX 6

javascript
import { configure } from 'mobx';

configure({
  enforceActions: 'always', // 默认值
  useProxies: 'ifavailable', // 默认值
  computedRequiresReaction: false // 默认值
});

MobX 6 的默认配置更加严格和合理。

5. Proxy 的强制使用

MobX 6 强制使用 Proxy（在支持的浏览器中），这提供了更好的性能和更简单的 API。

Proxy 的优势

• 更好的性能
• 更简单的 API
• 更好的 TypeScript 支持
• 更少的限制

不支持 Proxy 的环境

在旧浏览器或 Node.js 环境中，MobX 6 会自动降级到兼容模式。

6. 移除的 API

以下 API 在 MobX 6 中被移除：

• isObservableObject → 使用 isObservable
• intercept → 使用 observe 的拦截功能
• extras API → 大部分功能已集成到主 API
• toJS → 使用 toJSON 或手动转换

7. TypeScript 支持的改进

MobX 6 对 TypeScript 的支持更加完善：

typescript
import { makeAutoObservable } from 'mobx';

class Store {
  count: number = 0;
  firstName: string = 'John';
  lastName: string = 'Doe';
  
  constructor() {
    makeAutoObservable(this);
  }
  
  get fullName(): string {
    return `${this.firstName} ${this.lastName}`;
  }
  
  increment(): void {
    this.count++;
  }
}

类型推断更加准确，类型定义更加简洁。

8. 性能优化

MobX 6 引入了多项性能优化：

• 更快的依赖追踪
• 更高效的 computed 缓存
• 更好的批量更新机制
• 减少的内存占用

9. 调试体验的改进

MobX 6 提供了更好的调试工具：

• 更清晰的错误消息
• 更好的堆栈跟踪
• 改进的 DevTools 支持

10. 迁移指南

从 MobX 5 迁移到 MobX 6

1. 更新依赖

bash
npm install mobx@6 mobx-react@6

1. 添加 action 装饰器

javascript
// 之前
increment() {
  this.count++;
}

// 之后
@action
increment() {
  this.count++;
}

1. 使用 makeObservable 或 makeAutoObservable

javascript
constructor() {
  makeAutoObservable(this);
}

1. 更新配置

javascript
configure({
  enforceActions: 'always'
});

1. 移除已废弃的 API

• 替换 toJS 为 toJSON
• 更新 isObservableObject 为 isObservable

总结

MobX 6 是一个重要的版本更新，主要改进包括：

• 强制使用 action 提高可预测性
• 简化的 API 和更好的 TypeScript 支持
• 强制使用 Proxy 提高性能
• 更好的调试体验
• 移除已废弃的 API

迁移到 MobX 6 需要一些工作，但带来的改进是值得的。建议新项目直接使用 MobX 6，现有项目逐步迁移。