目录

1、Vue class 组件介绍

2、Vue class 组件基本使用

3、Vue class 组件带来的优点

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 生命周期钩子可以直接作为类的成员方法
• 所有其他属性，需要放在装饰器中