vue-ts 中 @Component 解读--写一个自己的类装饰器和方法装饰器

类装饰器–应用于类构造函数，其参数是类的构造函数

@Component就是个类装饰器，作用于Vue对象

vue-class-component 中，入口代码是
function Component(options) {
if (typeof options === 'function') {
    return componentFactory(options);
}
return function (Component) {         //vue对象，类装饰器返回
    return componentFactory(Component, options);
};｝

主要是 componentFactory方法，该方法做了以下事情：

1. 遍历形参,即Vue组件的Component
2. 根据变量Component,生成组件的配置变量options
3. 通过Vue.extend方法和配置变量options生成Vue的子类,并且返回该类

自定义 类装饰器

function TimedTask (options) {
	return function (VueComponent) {
		injectDecoratorsToVue(VueComponent, options => {
			(options.mixins || (options.mixins = [])).push(Vue.extend({
				 created () {},
				 mounted () {},
				 activated () {},
				 methods: {}
			})
		} )
		return VueComponent;
	}
}
//把装饰器注入到vue里面去
function injectDecoratorsToVue (VueComponent,   decorators) {
	if (!VueComponent.__decorators__) {
    ctor[vueClassDecoratorField] = [];
}

VueComponent.__decorators__= VueComponent.__decorators__!.concat(decorators)
}

例子：

@TimedTask({
    fn: 'fetchDetailInfo',
    interval: INTERVAL
})
export default class Detail extends Vue {
}

自定义 方法装饰器

它会被应用到方法的 属性描述符上，可以用来监视，修改或者替换方法定义。

方法装饰会在运行时传入下列3个参数：

1、对于静态成员来说是类的构造函数，对于实例成员是类的原型对象。
2、成员的名字。
3、成员的属性描述符{value: any, writable: boolean, enumerable: boolean, configurable: boolean}。

function Debounce(wait = defaultDelayTime, options?: DebounceSettings) {
return function (target: AnyObj, propertyKey: string, descriptor: TypedPropertyDescriptor) {
    const oldFunc = descriptor.value;
    if (!oldFunc) {
        return;
    }

    descriptor.value = debounce(oldFunc, wait, options);
};

}
例子：

@Debounce(10000)
private updateNum () {
    this.$emit('update:num', this.inputNum);
    this.$emit('input', this.getValue());
}