如何在Vue中使用TypeScript裝飾器

如何在Vue中使用TypeScript裝飾器？針對這個問題，這篇文章詳細介紹了相對應的分析和解答，希望可以幫助更多想解決這個問題的小伙伴找到更簡單易行的方法。

主要的Decorator依賴

vue-cli3 默認支持Decorator, 年初重寫了一個design庫主要依賴官方和社區提供的Decorator來實現的組件。 Decorator可以非侵入的裝飾類、方法、屬性，解耦業務邏輯和輔助功能邏輯。以下是主要的三方Decorator組件：

vue-class-component

• @Component 如果您在聲明組件時更喜歡基于類的 API，則可以使用官方維護的 vue-class-component 裝飾器

• 實時計算computed屬性, get computedMsg () {return 'computed ' + this.msg}

• 生命周期鉤子 mounted () {this.greet()}

vuex-class

讓Vuex和Vue之間的綁定更清晰和可拓展

• @State

• @Getter

• @Action

• @Mutation

vue-property-decorator

這個組件完全依賴于vue-class-component.它具備以下幾個屬性:

• @Component (完全繼承于vue-class-component)

• @Prop：父子組件之間值的傳遞

• @Emit：子組件向父組件傳遞

• @Model：雙向綁定

• @Watch：觀察的表達式變動

• @Provice：在組件嵌套層級過深時。父組件不便于向子組件傳遞數據。就把數據通過Provide傳遞下去。

• @Inject：然后子組件通過Inject來獲取

• Mixins (在vue-class-component中定義);

core-decorators

• @readonly

• @autobind : TSX 回調函數中的 this，類的方法默認是不會綁定 this 的，可以使用autobind裝飾器

• @override

總結一下主要就分成這三類:

• 修飾類的：@Component、@autobind；

• 修飾方法的：@Emit、@Watch、@readonly、@override；

• 修飾屬性的：@Prop、@readonly；

以上引用方法等詳系內容可查看官方文檔。下面自定義部分來實現一個記錄日志功能的裝飾器。

自定義Decorator示例

@Logger，Logger日志裝飾器通常是修飾方法，Decorater則是在 運行時就被觸發了 ，日志記錄是在 方法被調用時觸發 ,示例中通過自動發布事件實現調用時觸發。為增加日志記錄的靈活性，需要通過暴露鉤子函數的方式來改變日志記錄的內容。
期望的日志格式

{
  "logId":"", // 事件Id
  "input":"", // 方法輸入的內容
  "output":"", // 方法輸出的內容
  "custom":"" // 自定義的日志內容
}

實現

export function Logger(logId?: string, hander?: Function) {
  const loggerInfo =Object.seal({logId:logId, input:'',output:'', custom: ''});
  const channelName = '__logger';
  const msgChannel = postal.channel(channelName);
  msgChannel.subscribe(logId, logData => {
    // 根據業務邏輯來處理日志
    console.log(logData);
  });

  return function (target: any,
    key: string,
    descriptor: TypedPropertyDescriptor<any>): TypedPropertyDescriptor<any> {
      const oldValue = descriptor.value
      descriptor.value = function () {
        const args: Array<any> = [];
        for (let index in arguments) {
        args.push(arguments[index]);
        }
        loggerInfo.input = `${key}(${args.join(',')})`;
        // 執行原方法
        const value = oldValue.apply(this, arguments);
        loggerInfo.output = value;
        hander && (loggerInfo.custom = hander(loggerInfo.input, loggerInfo.output) || '');
        // 被調用時，會自動發出一個事件
        msgChannel.publish(logId, loggerInfo);
      }
      return descriptor
  }
}

使用

@Logger('event_get_detial1')
getDetial(id?: string, category?: string) {
  return "詳細內容";
}
// 或者
@Logger('event_get_detial2', (input, output) => {
    return '我是自定義內容';
})
getDetial2(id?: string, category?: string) {
  return "詳細內容";
}
...
<button @click="getDetial2('1000', 'a')">獲取詳情</button>

效果: {logId: "event_get_detial2", input: "getDetial(1000,a)", output: "詳細內容", custom: "我是自定義內容"} , 每次點擊按鈕都會觸發一次。

TODO: 這里還需要對輸入參數和輸出參數中的引用數據類型做處理。

同時還需要掌握： 裝飾器工廠、裝飾器組合、裝飾器求值、參數裝飾器、元數據

哪些功能適合用Decorator實現

官網和社區提供的這些Decorator, 可以作為自己框架的底層設計。

日志功能全局都得用，調用方法基本一致，是最適合使用裝飾器來實現，并且每個項目的日志記錄各有差異，最適合自定義這部分。

Decorator實現小Tips

• 考慮下各類Decorator疊加和共存的問題,可以參考官網關于裝飾器組合描述

• Decorator 的目標是在原有功能基礎上，添加功能，切忌覆蓋原有功能

• 類裝飾器不能用在聲明文件中( .d.ts)，也不能用在任何外部上下文中（比如declare的類）

• 裝飾器只能用于類和類的方法，不能用于函數，因為存在函數提升。類是不會提升的，所以就沒有這方面的問題。

• 注意遷移速度、避免一口吃成胖子的做法

• 不要另起爐灶對主流庫創建Decorator庫，主流庫維護成本很高還是得有官方來維護，為保證質量不使用個人編寫的Decorator庫。自己在創建Decorator庫時也要有這個意識，僅做一些有必要自定義的。

• Decorator 不是管道模式，decorator之間不存在交互，所以必須注意保持decorator獨立性、透明性

• Decorator 更適用于非業務功能需求

• 確定 decorator 的用途后，切記執行判斷參數類型

• decorator 針對每個裝飾目標，僅執行一次
  

關于如何在Vue中使用TypeScript裝飾器問題的解答就分享到這里了，希望以上內容可以對大家有一定的幫助，如果你還有很多疑惑沒有解開，可以關注億速云行業資訊頻道了解更多相關知識。