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