Vue-property-decorator: 從多個方面詳細闡述

一、屬性裝飾器

Vue.js中的數據在組件中應該如何定義? data 函數嗎? Vue的官方文檔建議我們採用屬性裝飾器的方式去定義組件中的數據屬性，這樣能減少冗餘代碼。使用裝飾器在 Vue 組件中定義屬性非常方便，只需要在屬性前面加上 @Prop() 即可。只要在組件中聲明了帶有 @Prop() 裝飾器的屬性，Vue將會自動將該屬性加入props中並自動解析成父組件傳遞的值。示例代碼如下：

import { Vue, Component, Prop } from 'vue-property-decorator';

@Component
export default class HelloWorld extends Vue {
  @Prop() msg!: string;

  // ...
}

二、方法裝飾器

在 Vue 組件中定義方法非常簡單，但是如果需要使用 mixins 或其他功能來增強方法，使用方法裝飾器會更加簡單明了。使用 @Emit() 可以方便地將一個方法的返回值自動發射出去，而無需手動調用 $emit 了。例如：

import { Vue, Component, Emit } from 'vue-property-decorator';

@Component
export default class HelloWorld extends Vue {
  @Emit()
  emitMethod(msg: string): string {
    return msg;
  }

  // ...
}

三、生命周期方法裝飾器

在 Vue 組件中我們經常需要通過鉤子函數去實現業務邏輯。Vue-property-decorator提供了生命周期方法裝飾器，可以自動地將鉤子函數與組件關聯起來。例如下方示例代碼中的 @Mounted()，會在組件渲染完成後自動調用生命周期函數 mounted()。代碼示例：

import { Vue, Component, Mounted } from 'vue-property-decorator';

@Component
export default class HelloWorld extends Vue {
  @Mounted
  mountedHandler() {
    console.log('mounted');
  }
}

四、計算屬性裝飾器

在 Vue 中，我們可以通過computed計算屬性來返回過濾數組、動態的class、樣式屬性等值。Vue-property-decorator可以幫助我們更好地管理和定義這些計算屬性，只需在組件內使用 @Getter 定義，具體步驟可以參考下方代碼示例：

import { Vue, Component, Getter } from 'vue-property-decorator';

@Component
export default class HelloWorld extends Vue {
  name: string = 'Vue'
  
  @Getter get message() {
    return `Hello ${this.name} !`
  }
}

五、依賴注入裝飾器

Vue-property-decorator 還提供了依賴注入的裝飾器功能，基於類的依賴注入可以有效地組織和管理相關代碼。我們需要引入 Inject 和 Provide 兩個裝飾器，然後使用@Provide和@inject裝飾器來定義提供方和使用方。具體示例代碼如下：

import { Vue, Component, Inject, Provide } from 'vue-property-decorator';

@Component
export default class App extends Vue {
  @Provide() app = this;

  @Inject() app!: App;

  // ...
}