Primitive values and references

JavaScript中的所有原始数据都是不可变的,因此根据此定义这些是不可被观察的。 通常来说这没问题,因为MobX通常只是把包含值的的属性变成可被观察的。 详见observable objects。 在特殊情况下,它可以方便的使一个不是对象拥有的"元"数据可被观察。 对于这些情况,我们可以创建一个可被观察的box去管理,比如观察一个元数据。

observable.box(value)

所以 observable 也接收标量值,并返回一个含有一个 getter / setter 方法的对象去保存此值。 此外,你可以使用 .observe 方法给存储的值注册一个回调去监听其值变化时,但是在多数情况下使用 mobx.autorun 替代。

所以observable(scalar)返回的对象签名是:

  • .get() 返回当前值
  • .set(value) 替换当前存储的值,并通知所有的观察者。
  • intercept(interceptor) 可以在应用之前拦截更改,参阅observe & intercept
  • .observe(callback: (newValue, previousValue) => void, fireImmediately = false): disposerFunction 注册一个存储的值每次替换时都会触发的观察者函数,其返回一个函数以取消该观察。请参阅observe & intercept

observable.shallowBox(value)

shallowBox 基于 ref 修订符创建一个 box 。 这也就是说 box 中的任何(将来)值都不会自动自动转换为可观察的。

observable(primitiveValue)

当时用通用的 observable(value) 方法时, MobX 将为任何无法自动变成可观察值的值创建一个可观察的 box.. 例子:

import {observable} from "mobx";

const cityName = observable("Vienna");

console.log(cityName.get());
// prints 'Vienna'

cityName.observe(function(newCity, oldCity) {
    console.log(oldCity, "->", newCity);
});

cityName.set("Amsterdam");
// prints 'Vienna -> Amsterdam'

数组 例子:

import {observable} from "mobx";

const myArray = ["Vienna"];
const cityName = observable(myArray);

console.log(cityName[0]);
// prints 'Vienna'

cityName.observe(function(observedArray) {
    if (observedArray.type === "update") {
        console.log(observedArray.oldValue + "->" + observedArray.newValue);
    } else if (observedArray.type === "splice") {
        if (observedArray.addedCount > 0) {
            console.log(observedArray.added + " added");
        }
        if (observedArray.removedCount > 0) {
            console.log(observedArray.removed + " removed");
        }
    }
});

cityName[0] = "Amsterdam";
// prints 'Vienna -> Amsterdam'

cityName[1] = "Cleveland";
// prints 'Cleveland added'

cityName.splice(0, 1);
// prints 'Amsterdam removed'

Name argument

observable.boxobservable.shallowBox 都有第二个参数, 这个参数被当做如 spy 或者 MobX 开发工具的调试名称。