Mobx 初识

Mobx 的最基础知识点，习完可以直接上手 Mobx 在项目中应用

makeObservable:

• 语法：
  • makeObservable(target, overrides?, options?)
• 作用：
  • 创建可观察对象，将普通对象转换为可观察对象;
• 参数：
  • target: 需要转换成可观察对象的JavaScript对象;
  • overrides: 覆盖默认绑定的属性和方法, 为其提供特定的注解；
  • options: 配置选项；
• 注意：
  • 使用 makeObservable 做数据绑定的话，需要手动指定每个属性和方法绑定的类型；
    • obserable: 做属性绑定
    • action: 给方法做注解
    • flow: 给异步方法做注解
    • *.bound: 是因为 react 中严格模式下，class中的方法会丢失this指向，所以需要手动绑定 this, *.bound 可以自动绑定this;

makeAutoObservable:

• 语法：
  • makeAutoObservable(target, overrides?, options?)
• 作用：
  • 自动做 observable, action, flow 的指定；
• 参数：
  • target: 需要转换成可观察对象的JavaScript对象;
  • overrides 参数是可选的，覆盖默认绑定的属性和方法, 为其提供特定的注解；
  • options 参数是可选的，可以调整可观察方式；

observable:

• 语法：
  • observable(source, overrides?, options?)
  • @bservable asscessor (字段装饰器)
• 作用：
  • observable 注解可以作为一个函数进行调用，从而一次性将整个对象变成可观察的;
• 参数：
  • source: source 对象将会被克隆并且所有的成员都将会成为可观察的，类似于 makeAutoObservable 做的那样;
  • overrides: 覆盖默认绑定的属性和方法, 为其提供特定的注解；
  • options : 参数是可选的，可以调整可观察方式；

参数 options:

• options 支持以下选项：
  • autoBind: true; 默认使用 action.bound/flow.bound，而不使用 action/flow。不影响被显式注释过的成员。
  • deep: false; 默认使用 observable.ref，而不使用 observable。不影响被显式注释过的成员。
  • name: < string >; 为对象提供一个调试名称，该名称将被打印在错误消息和 reflection API 中。
  • proxy: false; 迫使 observable(thing) 使用非 proxy 的实现。如果对象的结构不会随着时间变化，那么这就是一个很好的选择，因为非代理对象更容易调试并且速度更快。

make(Auto)Observable() 和 observable() 区别

1. 主要区别在于，make(Auto)Observable(target, overrides?, options?) 第一个参数传入的对象可修改，而 observable(source, overrides?, options?) 是基于 source 对象 创建一个可观察的克隆对象, 修改的是这个克隆的对象；
2. observable(source, overrides?, options?) 创建了 Proxy 对象，以便在你将该对象用作动态查找映射时能够捕获将来添加的属性,一般用于动态创建响应数据；如果所有成员都是预先已知的，建议使用make(Auto)Observable(target, overrides?, options?)，因为非代理对象速度更快一些，并且更容易在调试器中检查和console.log