系列文章：

• 全新 Javascript 装饰器实战上篇：用 MobX 的方式打开 Vue
• 全新 JavaScript 装饰器实战下篇：实现依赖注入

去年三月份装饰器提案进入了 Stage 3 阶段，而今年三月份 Typescript 在 5.0 也正式支持了 。装饰器提案距离正式的语言标准，只差临门一脚。

这也意味着旧版的装饰器(Stage 1) 将逐渐退出历史舞台。然而旧版的装饰器已经被广泛的使用，比如 MobX、Angular、NestJS… 未来较长的一段时间内，都会是新旧并存的局面。

本文将把装饰器语法带到 Vue Reactivity API 中，让我们可以像 MobX 一样，使用类来定义数据模型, 例如:

class Counter {
  @observable
  count = 1

  @computed
  get double() {
    return this.count * 2
  }

  add = () => {
    this.count++
  }
}

在这个过程中，我们可以体会到新旧装饰器版本之间的差异和实践中的各种陷阱。