Vue框架TypeScript装饰器使用指南小结

前言

装饰器是一种特殊类型的声明，它能够被附加到 类声明，方法， 访问符，属性或参数 上。 装饰器使用 @expression这种形式， expression求值 后必须为一个函数，它会在 运行时被调用 ，被装饰的声明信息做为参数传入。

本篇先从项目的宏观角度来总结一下decorator如何组织。

目录

• 主要的decorator依赖
  • vue-class-component
  • vuex-class
  • vue-property-decorator
  • core-decorators
• 自定义decorator示例
• 哪些功能适合用decorator实现
• decorator实现小tips
• see also

主要的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 针对每个装饰目标，仅执行一次
  

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。