2.mobx与decorator配合使用.md

mobx 与 decorator 配合使用

为了方便发挥 mobx 的语法优势，可以使用 decorator 的方式来使用 mobx。这样会方便很多。

若对 decorator 不是很了解可先参考 plus1.decorator(修饰器)的使用

基础格式

基础格式为使用 observable 修饰 class 的变量属性，用 computed 修饰 class 的函数（并配 合get方便取值）。ex：

import { observable, computed, autorun } from 'mobx';

class TodoList {
    @observable todos = [];
    @computed get todoListString() {
        return this.todos
            .filter(todo => !todo.finished)
            .map((todo, i) => `${i+1}. ${todo.content}`)
            .join('\n');
    }
}

详细可以参考 /scripts/base2.js

备注：

去除在 base2.js 的代码中的 @computed ，发现程序依旧可以正常运作，貌似 @computed 并没有什么作用。 实际上 @computed 修饰的函数在计算后返回的值可能被多个 autorun 用到，如果不加 @computed 则被修饰 的函数会被执行多次造成重复计算，使用了 @computed 后计算的值将会被缓存，直接给 autorun 使用，避免重 复计算造成的性能损耗。