浅析vueclasscomponent介绍：用类的方式编写组件

　　vue-class-component 是 vue 的官方库，作用是用类的方式编写组件。这种编写方式可以让 .vue 文件的 js 域结构更扁平，并使 vue 组件可以使用继承、混入等高级特性。

　　vue2.x 对 TS 的支持并不友好，所以 vue2.x 跟 TS 的整合，通常需要基于 vue-class-component 来用基于 class（类） 的组件书写方式。

　　vue英文官网推荐了一个叫 vue-class-component 的包，可以以 class（类） 的模式写vue组件。vue-class-component（以下简称Component）带来了很多便利：

• methods，钩子都可以直接写作class的方法
• computed 属性可以直接通过 get 来获得
• 初始化data可以声明为class的属性
• 其他的都可以放到 Component 装饰器里

　　官方文档：https://class-component.vuejs.org/

　　vue-property-decorator 是一个非官方库，是 vue-class-component 的很好的补充。它可以让vue的某些属性和方法，通过修饰器的写法让它也写到vue组件实例的类里面。比如 @Prop @Watch @Emit。

1、安装下载

npm install vue-class-component vue-property-decorator --save-dev

2、区别与联系

（1）vue-property-decorator - 社区出品；vue-class-component - 官方出品

（2）vue-class-component 提供了Vue、Component等；

（3）vue-property-decorator深度依赖了vue-class-component，拓展出了更多操作符：@Prop、@Emit、@Inject、@Model、@Provide、@Watch；

3、使用方式：开发时正常引入vue-property-decorator就行，引入后写 vue 代码就是如此

import {Component, Prop, Vue} from 'vue-property-decorator'
@Component
export default class App extends Vue {
 name:string = 'Simon Zhang'
 // computed
 get MyName():string {
 　　return `My name is ${this.name}`
 }
 // methods
 sayHello():void {
 　　alert(`Hello ${this.name}`)
 }
 mounted() {
 　　this.sayHello();
 }
}

　　具体如何使用直接看官网文档吧。这里有一篇文章翻译可以参考学习：《Vue中的Class Component使用指南》

　　然后现在 vue3.x 已出，对 TS 很友好的支持，所以使用 vue3.x 的话暂时就不需要这种写法了。