Observable Objects

如果一个纯 JavaScript 对象传递给observable,其包含的所有的属性都将被观察(纯对象就是不通过构造函数创造的对象)。默认情况下,observable是递归调用的,所以如果遇到一个值是对象或数组的情况,它的值也会将通过observable传递。

import {observable, autorun, action} from "mobx";

var person = observable({
    // observable properties:
    name: "John",
    age: 42,
    showAge: false,
    // computed property:
    get labelText() {
        return this.showAge ? `${this.name} (age: ${this.age})` : this.name;
    },
    // action:
    setAge: action(function() {
        this.age = 21;
    })
});

// object properties don't expose an 'observe' method,
// but don't worry, 'mobx.autorun' is even more powerful
autorun(() => console.log(person.labelText));

person.name = "Dave";
// prints: 'Dave'

person.setAge(21);
// etc

在使一个对象可观察时需要注意一些事情:

  • 当通过使用observable传递对象时,在使对象变得可观察时,只有当时存在的属性才会被观察。后续在添加到对象中的属性是不会被观察的,除非使用 extendObservable
  • 只有纯对象才能被观察。对于非纯对象,其构造函数负责初始化其可被观察的属性。使用@observable注释或 extendObservable函数。
  • getters 属性将会自动转换为派生属性,就像@computed做的事是一样的。
  • 已废弃 无参函数也将会自动转换为派生属性,就像@computed做的事是一样的。
  • observable自动的被递归应用于整个对象结构,在实例化和任何将来会被分配给可观察属性的新值。Observable 不会递归到非纯对象里。
  • 默认情况下,95%的情况都可以运行良好,但是对于哪些属性应该精细化的可观察,请参阅 modifiers 章节。

observable.object(props) & observable.shallowObject(props)

observable(object) 只是 observable.object(props) 的缩写。 默认情况下所有的属性都会进行 deep observablemodifiers 可以用来覆盖单个属性的此行为。 shallowObject(props) 可以用来让这些属性进行浅观察。也就是说, 对值的引用是 observabled 的, 但是这个值本身不会被自动观察到。

Name argument

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