1、Vue class 组件介绍
在 Vue 的 V2.X 版本中使用 TypeScript 时，推荐使用 基于类的注解装饰器 进行开发。Vue 官方推荐 Vue Class Component，但是它的装饰器可能存在一点小问题，业界普遍推荐使用 vue-property-decorator，它是基于 vue-class-component 开发而成，但是性能上有一些改进，下面主要介绍基于 vue-property-decorator 的 Vue class 组件的基本使用。
Vue class 类组件的基本结构：@Component 装饰器可以使类成为 Vue 组件
import Vue from 'vue' import Component from 'vue-class-component' //推荐 vue-property-decorator // HelloWorld class will be a Vue component @Component export default class HelloWorld extends Vue {}
2、Vue class 组件基本使用
回想一下使用 JS 对象的普通 vue 组件的基本结构是，再看一下基于 JS 或 TS 的类组件的写法：
export default { data, props, methods, created, ...} // 使用 JS 对象的普通 vue 组件 @Component export default class XXX extends Vue { // 用 TS 类 <script lang="ts"> xxx: string = 'hi'; // 直接声明 data 变量即可，需要给变量指定类型 selectType(type: string){...}; // 直接写 methods 方法即可，需要给参数指定类型 @Prop(Number) xxx: number | undefined;// Number表示变量xxx的运行时类型，number|undefined表示变量xxx的编译时类型 //@Prop 是告诉 Vue xxx 不是 data 是 prop //Number 是告诉 Vue xxx 运行时是个 Number 类型 //number | undefined 是告诉 TS xxx 的编译时类型 } @Component export default class XXX extends Vue { // 用 JS 类 <script lang="js"> xxx = 'hi'; // 如果你不想使用 ts 类，可以使用这种 } // 但是优先推荐使用 ts 类组件，它可以指定变量类型，编译时就报错
上面涉及到 data、methods、props 的基本使用方式，剩下的一些 Vue options 选项可以参考文档，这里就不赘述了。
3、Vue class 组件带来的优点
- 初始化的 data 可以被声明为类属性
- methods 可以直接声明为类的成员方法
- 计算属性可以被声明为类的属性访问器
- data、render 以及所有的 Vue 生命周期钩子可以直接作为类的成员方法
- 所有其他属性，需要放在装饰器中
