@observable

egghead.io 第1课: observable & observeregghead.io 第4课: observable 对象 & 映射

装饰器可以在 ES7 或者 TypeScript 类属性中属性使用,将其转换成可观察的。@observable 可以在实例字段和属性 getter 上使用。对于对象的哪部分需要成为可观察的,@observable 提供了细粒度的控制。

  1. import { observable, computed } from "mobx";
  2. class OrderLine {
  3. @observable price = 0;
  4. @observable amount = 1;
  5. @computed get total() {
  6. return this.price * this.amount;
  7. }
  8. }

如果你的环境不支持装饰器或字段初始化器,那么 @observable key = value; 会是 extendObservable(this, { key: value }) 的语法糖。

注意: 所有的属性都是惰性定义的,直到它们中任何一个属性被访问。在此之前,它们只是定义在类的原型上。

换句话说:

  1. const line = new OrderLine();
  2. console.log("price" in line); // true
  3. console.log(line.hasOwnProperty("price")); // false,price 属性是定义在类上的,尽管值会被存储在每个实例上。
  4. line.amount = 2;
  5. console.log(line.hasOwnProperty("price")); // true, 现在所有的属性都定义在实例上了。

@observable 装饰器可以和像 asStructure 这样的调节器共同使用:

  1. @observable position = asStructure({ x: 0, y: 0})

在编译器中启用装饰器

在使用 TypeScript 或 Babel 这些等待ES标准定义的编译器时,默认情况下是不支持装饰器的。

  • 对于 typescript,启用 --experimentalDecorators 编译器标识或者在 tsconfig.json 中把编译器属性 experimentalDecorators 设置为 true (推荐做法)
  • 对于 babel5,确保把 --stage 0 传递给 Babel CLI
  • 对于 babel6,参见此 issue 中建议的示例配置。