如果一个纯 JavaScript 对象传递给 observable
,其包含的所有的属性都将被观察(纯对象就是不通过构造函数创造的对象)。默认情况下, observable
是递归调用的,所以如果遇到一个值是对象或数组的情况,对象中每个属性的值和数组中每个元素也会传递给 observable
。
import {observable, autorun, action} from "MobX";
var person = observable({
// 可观察属性:
name: "John",
age: 42,
showAge: false,
// 计算属性:
get labelText() {
return this.showAge ? `${this.name} (age: ${this.age})` : this.name;
},
// action:
setAge: action(function() {
this.age = 21;
})
});
// 对象属性不会暴露一个observe方法,但不用着急,'MobX.autorun' 更加有威力。
autorun(() => console.log(person.labelText));
person.name = "Dave";
// prints: 'Dave'
person.setAge(21);
// etc
在使一个对象可观察时需要注意一些事情:
- 当通过使用
observable
传递对象时,在使对象变得可观察时,只有当时存在的属性才会被观察。后续在添加到对象中的属性是不会被观察的,除非使用extendObservable
。 - 只有纯对象才能被观察。对于非纯对象,其构造函数负责初始化其可被观察的属性。使用
@observable
装饰或extendObservable
函数。 - getters 属性将会自动转换为衍生属性,就像
@computed
做的事是一样的。 observable
自动的被递归应用于整个对象结构,在实例化和任何将来会被分配给可观察属性的新值。Observable 不会递归到非纯对象里。- 默认情况下,95%的情况都可以运行良好,但是对于哪些属性应该细粒度地被观察,请参阅 modifiers 章节。
observable(object)
只是 observable.object(props)
的一个缩略写法。所有的属性都会被深度转换为可观察的。
modifiers 可以重写这一行为。
shallowObject(props)
用于确保属性只是浅观察的。意思是引用属性是可观察的,但引用属性对应的值的内容并不是可观察的。
observable.object
and observable.shallowObject
都获取第二个参数作为debug name,给开发工具使用。