如何在Vue中使用TypeScript裝飾器？針對(duì)這個(gè)問(wèn)題，這篇文章詳細(xì)介紹了相對(duì)應(yīng)的分析和解答，希望可以幫助更多想解決這個(gè)問(wèn)題的小伙伴找到更簡(jiǎn)單易行的方法。
主要的Decorator依賴
vue-cli3 默認(rèn)支持Decorator, 年初重寫了一個(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): TypedPropertyDescriptor {
const oldValue = descriptor.value
descriptor.value = function () {
const args: Array = [];
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)容";
}
...
獲取詳情 效果: {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è)人編寫的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í)。
