总览

Vue Class Component 是一个库，可以让你使用Class语法的样式编写你的Vue组件。 例如，下面是一个用Vue Class Component编写的简单计数器组件：

<template>
  <div>
    <button v-on:click="decrement">-</button>
    {{ count }}
    <button v-on:click="increment">+</button>
  </div>
</template>

<script>
import Vue from 'vue'
import Component from 'vue-class-component'

// Define the component in class-style
@Component
export default class Counter extends Vue {
  // Class properties will be component data
  count = 0

  // Methods will be component methods
  increment() {
    this.count++
  }

  decrement() {
    this.count--
  }
}
</script>

如示例所示，可以通过使用@Component装饰器为类添加注释，从而以直观和标准的类语法定义组件数据和方法。 您可以简单地用class-style的组件替换组件定义，因为它与组件定义的普通options对象样式等效。

通过以类样式定义组件，不仅可以更改语法，还可以利用某些ECMAScript语言功能，例如类继承和装饰器。 Vue Class Component还提供了一个mixins helper用于mixin继承，以及一个createDecorator function更容易的创建你的装饰器。

你也许还想查看@Prop和@Watch装饰器，链接地址Vue Property Decorator (opens new window)