淺析vue-class-component介紹：用類的方式編寫組件

　　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 的話暫時就不需要這種寫法了。