启用装饰器语法 🚀

在版本6之前，Mobx鼓励使用ES.next中的decorators,将某个对象标记为observable, computed 和 action。然而，装饰器语法尚未定案以及未被纳入ES标准，标准化的过程还需要很长时间，且未来制定的标准可能与当前的装饰器实现方案有所不同。出于兼容性的考虑，我们在MobX 6中放弃了它们，并建议使用makeObservable / makeAutoObservable代替。

鉴于目前仍有很多代码库，在线文档和教程在使用decorator，我们的规则是，任何可以使用observable, action 和 computed等注解的地方，你也可以使用decorator。下面是示例：

javascript

import { makeObservable, observable, computed, action } from "mobx"

class Todo {
    id = Math.random()
    @observable title = ""
    @observable finished = false

    constructor() {
        makeObservable(this)
    }

    @action
    toggle() {
        this.finished = !this.finished
    }
}

class TodoList {
    @observable todos = []

    @computed
    get unfinishedTodoCount() {
        return this.todos.filter(todo => !todo.finished).length
    }

    constructor() {
        makeObservable(this)
    }
}

版本6之前的Mobx,不需要在构造函数中调用makeObservable(this)。在版本6中，为了让装饰器的实现更简单以及保证装饰器的兼容性，必须在构造函数中调用makeObservable(this)。Mobx可以根据 makeObservable第二个参数提供的装饰器信息，将实例设置为observable。

我们打算以这种方式来继续支持decorators。通过使用代码转换工具 ,你可以将任何现有的 MobX 4/5 项目，转换成使用makeObservable的项目。当你将你的项目从 MobX4/5 迁移到 MobX6 时，我们建议你始终运行代码转换工具，以确保生成了必要的makeObservable。

查看 MobX 4/5 升级指南 🚀

将`observer` 作为装饰器使用

mobx-react中的observer除了可以作为函数来使用，也可以作为装饰器，用来修饰类组件：

javascript

@observer
class Timer extends React.Component {
    /* ... */
}