decorator装饰器初探

es7中引入了一个强大的概念“装饰器”，这个在高级语言中应该是十分常见了吧，那么js也要紧跟潮流，为我们带来这个强大而好用的属性。

来说说这是干嘛的吧。所谓装饰器，顾名思义，肯定起到装饰作用。就好比房子装修，目的都是给人居住，但是装修的越好肯定居住的越舒服。那么，我给房子添加装修效果，转换到程序中，就是所谓的装饰器。通过装饰器，我们可以为函数附加更多的功能。

一个简单的例子。

function readonly(target, name, descriptor) {
  descriptor.writable = false
  return descriptor
}

class Test {
  @readonly
  name() { return 'leevare' }
}

通过上面这种方式，可以轻松地将name设置为只读地属性。那么，可以看到readonly函数中有三个不同的参数，它们分别代表什么意思呢？

首先target是表示要修饰的目标类，name表示要修饰的属性名，第三个参数descriptor表示该属性的描述对象。既然是这样，我们可以将其想象为Object.defineProperty，和这个参数看有点像。

Object.defineProperty(Test.prototype, 'name', {
  writable: false
})

上述达到是一样的效果。

那么，在使用装饰器的情况下，我们能很轻而易举的看到它修饰的属性有什么特点，比如在Vue中，它使用装饰器的写法如下，看看是不是更加清晰明了。

@Component
export default class HelloWorld extends Vue {
  @Prop({default: 'hello world'})
  private msg!: string;

  @Provide()
  times: number = 0

  addTimes(a: number): number {
    this.times = this.times + a
    return this.times
  }

  get computedMsg() {
    return 'computed ' + this.msg
  }

  mounted() {
    const times = this.addTimes(10)
  }

  @Watch('msg')
  onMsgChanged() {

  }
}