• 1. MobX 介绍
  • 1.1. MobX 要点
  • 1.2. 概念与原则
• 2. API概览
• 1. observable 相关
  • 3.1. observable
  • 3.2. @observable
  • 3.3. objects
  • 3.4. arrays
  • 3.5. maps
  • 3.6. boxed values
  • 3.7 decorators
• 1. 对 observables 作出响应
  • 4.1. (@)computed
  • 4.2. autorun
  • 4.3. when
  • 4.4. reaction
  • 4.5. (@)observer
  • 4.6. 理解 MobX 对何作出响应
• 1. 改变 observables
  • 5.1. action
  • 5.2. async actions & flows
  • 5.3. Object api
• 1. 工具函数
  • 6.1. toJS
  • 6.2. extendObservable
  • 6.3. createAtom
  • 6.4. intercept & observe
  • 6.5. mobxUtils.fromPromise
  • 6.6. mobxUtils.fromResource
  • 6.7. mobxUtils.toStream
  • 6.8. mobxUtils.fromStream
  • 6.9. mobxUtils.now
  • 6.10. mobxUtils.createTransformer
  • 6.11. mobxUtils.expr
  • 6.12. complete api overview
• 7. 博客、 视频及相关项目
• 1. 贴士与技巧
  • 8.1. 常见问题解答
  • 8.2. 常见陷阱与最佳实践
  • 8.3. 如何(不)使用装饰器
  • 8.4. 使用 trace 进行调试
  • 8.5. 定义数据存储
  • 8.6. 优化 React 组件
  • 8.7. 开发工具
  • 8.8. spy
• 9. 捐赠
• Published with GitBook

3.2. @observable

@observable

egghead.io 第1课: observable & observer

在 egghead.io 上观看

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

在 egghead.io 上观看

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

import { observable, computed } from "mobx";
class OrderLine {
    @observable price = 0;
    @observable amount = 1;
    @computed get total() {
        return this.price * this.amount;
    }
}

如果你的环境不支持装饰器或字段初始化器，使用 decorate 来代替 (想了解更多，参见 装饰)。

results matching ""

No results matching ""