Vue框架TypeScript装饰器使用指南小结
前言
装饰器是一种特殊类型的声明，它能够被附加到类声明，方法，访问符，属性或参数上。装饰器使用@expression这种形式，expression求值后必须为一个函数，它会在运行时被调用，被装饰的声明信息做为参数传入。
本篇先从项目的宏观角度来总结一下Decorator如何组织。
目录
- 主要的Decorator依赖
- vue-class-component
- vuex-class
- vue-property-decorator
- core-decorators
- 自定义Decorator示例
- 哪些功能适合用Decorator实现
- Decorator实现小Tips
- Seealso
主要的Decorator依赖
vue-cli3默认支持Decorator,年初重写了一个design库主要依赖官方和社区提供的Decorator来实现的组件。Decorator可以非侵入的装饰类、方法、属性，解耦业务逻辑和辅助功能逻辑。以下是主要的三方Decorator组件：
vue-class-component
- @Component如果您在声明组件时更喜欢基于类的API，则可以使用官方维护的vue-class-component装饰器
- 实时计算computed属性,getcomputedMsg(){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":""//自定义的日志内容
}
实现
exportfunctionLogger(logId?:string,hander?:Function){
constloggerInfo=Object.seal({logId:logId,input:'',output:'',custom:''});
constchannelName='__logger';
constmsgChannel=postal.channel(channelName);
msgChannel.subscribe(logId,logData=>{
//根据业务逻辑来处理日志
console.log(logData);
});
returnfunction(target:any,
key:string,
descriptor:TypedPropertyDescriptor):TypedPropertyDescriptor{
constoldValue=descriptor.value
descriptor.value=function(){
constargs:Array=[];
for(letindexinarguments){
args.push(arguments[index]);
}
loggerInfo.input=`${key}(${args.join(',')})`;
//执行原方法
constvalue=oldValue.apply(this,arguments);
loggerInfo.output=value;
hander&&(loggerInfo.custom=hander(loggerInfo.input,loggerInfo.output)||'');
//被调用时，会自动发出一个事件
msgChannel.publish(logId,loggerInfo);
}
returndescriptor
}
}
使用
@Logger('event_get_detial1')
getDetial(id?:string,category?:string){
return"详细内容";
}
//或者
@Logger('event_get_detial2',(input,output)=>{
return'我是自定义内容';
})
getDetial2(id?:string,category?:string){
return"详细内容";
}
...
获取详情
效果:{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针对每个装饰目标，仅执行一次
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。