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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM