如何在Vue中使用TypeScript裝飾器

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

我們提供的服務(wù)有：成都網(wǎng)站設(shè)計(jì)、網(wǎng)站制作、微信公眾號(hào)開(kāi)發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認(rèn)證、清豐ssl等。為1000+企事業(yè)單位解決了網(wǎng)站和推廣的問(wèn)題。提供周到的售前咨詢和貼心的售后服務(wù)，是有科學(xué)管理、有技術(shù)的清豐網(wǎng)站制作公司

主要的Decorator依賴

vue-cli3 默認(rèn)支持Decorator, 年初重寫(xiě)了一個(gè)design庫(kù)主要依賴官方和社區(qū)提供的Decorator來(lái)實(shí)現(xiàn)的組件。 Decorator可以非侵入的裝飾類、方法、屬性，解耦業(yè)務(wù)邏輯和輔助功能邏輯。以下是主要的三方Decorator組件：

vue-class-component

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

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

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

vuex-class

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

  • @State

  • @Getter

  • @Action

  • @Mutation

vue-property-decorator

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

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

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

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

  • @Model：雙向綁定

  • @Watch：觀察的表達(dá)式變動(dòng)

  • @Provice：在組件嵌套層級(jí)過(guò)深時(shí)。父組件不便于向子組件傳遞數(shù)據(jù)。就把數(shù)據(jù)通過(guò)Provide傳遞下去。

  • @Inject：然后子組件通過(guò)Inject來(lái)獲取

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

core-decorators

  • @readonly

  • @autobind : TSX 回調(diào)函數(shù)中的 this，類的方法默認(rèn)是不會(huì)綁定 this 的，可以使用autobind裝飾器

  • @override

總結(jié)一下主要就分成這三類:

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

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

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

以上引用方法等詳系內(nèi)容可查看官方文檔。下面自定義部分來(lái)實(shí)現(xiàn)一個(gè)記錄日志功能的裝飾器。

自定義Decorator示例

@Logger，Logger日志裝飾器通常是修飾方法，Decorater則是在 運(yùn)行時(shí)就被觸發(fā)了 ，日志記錄是在 方法被調(diào)用時(shí)觸發(fā) ,示例中通過(guò)自動(dòng)發(fā)布事件實(shí)現(xiàn)調(diào)用時(shí)觸發(fā)。為增加日志記錄的靈活性，需要通過(guò)暴露鉤子函數(shù)的方式來(lái)改變?nèi)罩居涗浀膬?nèi)容。
期望的日志格式

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

實(shí)現(xiàn)

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 => {
    // 根據(jù)業(yè)務(wù)邏輯來(lái)處理日志
    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(',')})`;
        // 執(zhí)行原方法
        const value = oldValue.apply(this, arguments);
        loggerInfo.output = value;
        hander && (loggerInfo.custom = hander(loggerInfo.input, loggerInfo.output) || '');
        // 被調(diào)用時(shí)，會(huì)自動(dòng)發(fā)出一個(gè)事件
        msgChannel.publish(logId, loggerInfo);
      }
      return descriptor
  }
}

使用

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

效果: {logId: "event_get_detial2", input: "getDetial(1000,a)", output: "詳細(xì)內(nèi)容", custom: "我是自定義內(nèi)容"} , 每次點(diǎn)擊按鈕都會(huì)觸發(fā)一次。

TODO: 這里還需要對(duì)輸入?yún)?shù)和輸出參數(shù)中的引用數(shù)據(jù)類型做處理。

同時(shí)還需要掌握： 裝飾器工廠、裝飾器組合、裝飾器求值、參數(shù)裝飾器、元數(shù)據(jù)

哪些功能適合用Decorator實(shí)現(xiàn)

官網(wǎng)和社區(qū)提供的這些Decorator, 可以作為自己框架的底層設(shè)計(jì)。

日志功能全局都得用，調(diào)用方法基本一致，是最適合使用裝飾器來(lái)實(shí)現(xiàn)，并且每個(gè)項(xiàng)目的日志記錄各有差異，最適合自定義這部分。

Decorator實(shí)現(xiàn)小Tips

  • 考慮下各類Decorator疊加和共存的問(wèn)題,可以參考官網(wǎng)關(guān)于裝飾器組合描述

  • Decorator 的目標(biāo)是在原有功能基礎(chǔ)上，添加功能，切忌覆蓋原有功能

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

  • 裝飾器只能用于類和類的方法，不能用于函數(shù)，因?yàn)榇嬖诤瘮?shù)提升。類是不會(huì)提升的，所以就沒(méi)有這方面的問(wèn)題。

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

  • 不要另起爐灶對(duì)主流庫(kù)創(chuàng)建Decorator庫(kù)，主流庫(kù)維護(hù)成本很高還是得有官方來(lái)維護(hù)，為保證質(zhì)量不使用個(gè)人編寫(xiě)的Decorator庫(kù)。自己在創(chuàng)建Decorator庫(kù)時(shí)也要有這個(gè)意識(shí)，僅做一些有必要自定義的。

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

  • Decorator 更適用于非業(yè)務(wù)功能需求

  • 確定 decorator 的用途后，切記執(zhí)行判斷參數(shù)類型

  • decorator 針對(duì)每個(gè)裝飾目標(biāo)，僅執(zhí)行一次

關(guān)于如何在Vue中使用TypeScript裝飾器問(wèn)題的解答就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，如果你還有很多疑惑沒(méi)有解開(kāi)，可以關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道了解更多相關(guān)知識(shí)。

網(wǎng)頁(yè)標(biāo)題：如何在Vue中使用TypeScript裝飾器
文章轉(zhuǎn)載：http://bm7419.com/article14/pccege.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供移動(dòng)網(wǎng)站建設(shè)、網(wǎng)站改版、軟件開(kāi)發(fā)、全網(wǎng)營(yíng)銷推廣、服務(wù)器托管、動(dòng)態(tài)網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)

微信小程序開(kāi)發(fā)