装饰器:装饰器是一种与类相关的语法,用来注释或者修改类和类方法的属性,装饰器一般和class类相关,普通函数不要使用
装饰器的本质是函数,它可以给类、属性或者方法增加一些其他的东西,扩展功能
修饰器对类的行为的改变,是代码编译时发生的(不是TypeScript编译,而是js在执行机中编译阶段),而不是在运行时。这意味着,修饰器能在编译阶段运行代码。也就是说,修饰器本质就是编译时执行的函数。
在Node.js环境中模块一加载时就会执行
(1)例子:
function decorator (target:any, key:any, descriptor:any) {
console.log(target)
console.log(key)
console.log(descriptor)
}
class Test {
private name:string;
constructor(name:string) {
this.name = name
}
@decorator
getName () {
return this.name
}
}
执行该文件:ts-node index.ts
就会执行 decorator 这个函数
输出:
下面看下装饰器的这三个参数:
target : 作用于谁,对于静态成员来说是类的构造函数,对于实例成员来说是类的原型对象;
key:作用的成员
descriptor: 成员的属性描述符,其中value 就是方法体
这是最基本的装饰器的使用,一进来初始化的时候就会执行装饰器的内容
(2)通过装饰器传值
<template>
<div @click="getName">点击</div>
</template>
<script lang="ts">
import { Vue, Component } from 'vue-property-decorator'
function decorator (params:Object) {
return function (target:any, key:any, descriptor: any) {
descriptor.value = () => {
console.log('装饰器', params)
}
}
}
@Component
class Index extends Vue {
private name:string = 'zfb'
@decorator({ event_id: 'getName' })
getName () {
console.log('正宗的getName', this.name)
}
}
export default Index
</script>
<style>
</style>
通过在装饰器中重写方法体,可以给所装饰的方法添加额外的操作,执行这段代码,发现只执行装饰器重写的了,没有执行方法中 定义的,所以需要在重写的函数中加上原有的函数操作
<template>
<div @click="getName">点击</div>
</template>
<script lang="ts">
import { Vue, Component } from 'vue-property-decorator'
const decorator = (params:Object) => {
// 返回的函数是装饰器函数
return (target:any, key:any, descriptor: any) => {
var origin = descriptor.value // 保留原来的方法
descriptor.value = function (...args:any[]) {
origin.apply(this, ...args)
console.log('装饰器', params)
}
}
}
@Component
class Index extends Vue {
private name:string = 'zfb'
@decorator({ event_id: 'getName' })
getName () {
console.log('正宗的getName', this.name)
}
}
export default Index
</script>
<style>
</style>
这样就可以一起执行了
总结:
(1)类的装饰器:可以在类之前调用装饰器,比如 @Component,装饰类的时候,一般就涉及到一个参数 target
(2)方法的装饰器:这时候涉及到三个参数 target, key, descriptor
(3)变量名的装饰器