Observable

在 MobX 中任何属性、对象、数组、Map、Set 等都可以被转化为可观察对象（Observable），要完成这一转化，需要使用 makeObservable() 为对象中的属性和方法等指定注解。makeObservable() 中所使用的注解主要有以下几个。

observable，标记一个用于存储 State 的可被追踪的字段。
- observable.ref，仅当被重新赋值时才进行追踪。
- observable.shallow，不跟踪集合中元素的值。
- observable.struct，仅跟踪值的结构。
action，标记一个可以修改 State 的方法。
computed，标记一个可以由 State 派生出新值的 Getter。
- computed.bound，仅关注计算结果的结构不同。
flow，标记一个生成器函数成员，主要用于管理异步进程。
override，用于子类覆盖继承标记。
true，自动推断最佳注解。
false，不为成员指定注解。

对于 Map 、Set、数组这样的集合将被自动转化为可观察对象。

构建可观察对象的函数有以下三个。

makeObservable(target, annotations, options)，用于手动对类进行标记。
makeAutoObservable(target, overrides, options)，用于利用自动推断对类或者工厂类进行标记。
observable(source, overrides, options)，用于对对象进行转换。

以下是这三个函数的使用方法示例。

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

class GearBox {
  currentGear;

  constructor(currentGear) {
    makeObservable(this, {
      currentGear: observable,
      gear: computed,
      shiftUp: action,
      shiftDown: action
    });
    this.currentGear = currentGear;
  }

  get gear() {
    return this.currentGear;
  }

  shiftUp() {
    this.currentGear++;
  }

  shiftDown() {
    this.currentGear--;
  }
}

如果使用 makeAutoObservable 上面这个示例就可以简化成下面的样子。

import { makeAutoObservable } from 'mobx';

class GearBox {
  currentGear;

  constructor(currentGear) {
    makeAutoObservable(this);
    this.currentGear = currentGear;
  }

  get gear() {
    return this.currentGear;
  }

  shiftUp() {
    this.currentGear++;
  }

  shiftDown() {
    this.currentGear--;
  }
}

至于 observable 的使用就比较简单了。

import { observable } from 'mobx';

const worksList = observable([
  {
    work_id: '123',
    title: 'Something to do.',
    done: false
  }
]);

一旦使用 observable 将一个对象转化为可观察对象，那么对这个对象进行任何操作，都可以被 MobX 所追踪到。

Tip

observable 创建的是对象的一个代理，而不是将对象本身变成了可观察对象，所以只有对这个代理对象进行操作，才可以被追踪到。

Live with React

Observable