三个装饰器，都是利用了async/await把异步变成同步的特性实现的。

要求被装饰的方法必须写成async/await，用起来十分方便，实现彻底被隐藏在了装饰器内部。

前两个都是用在ts环境下class写法的vue里的。

不过看清楚逻辑后，很容易修改成可以用在js环境中的vue组件上。

给vue添加一个pageIsReady的变量。

用于ts环境下的vue

通过装饰器添加这个属性，并包装vue的created, mounted和beforeDestroy方法。
当created或者mounted里发出的请求完成后，就把pageIsReady设为true。
使用这个装饰器时，在业务代码中完全无感，没有任何心智负担。

import { Constructor } from "vue/types/options";
export type WrapReadyProperty<T> = T & { pageIsReady?: boolean }
/**  
 * 在@compontent 之后使用这个装饰器，
 * 组件就会被注入属性 pageIsReady，
 * 当created和mounted都执行完成时 pageIsReady 变成true，
 * 要求mounted或created是async/await。(取决于在哪个方法中发请求初始化组件)
 * 然后可以在template中直接使用。
 * 在script中使用调用isPageReady.call(this)方法；
    */
export default function PageReadyStatus() {
    let createdDone = false;
    let mountedDone = false;
    function isCreatedMountedAllDone() {
        return createdDone && mountedDone;
    }
    return function pageReadyEnhancement<T extends Constructor>(target: T) {
        const oldMounted = target.prototype.mounted || function() { }
        const oldCreated = target.prototype.created || function() { }
        const oldBeforeDestroy = target.prototype.beforeDestroy || function() { }
        target.prototype.pageIsReady = false;
        target.prototype.created = async function(...params: any[]) {
            await oldCreated.apply(this, params);
            createdDone = true;
            this.pageIsReady = isCreatedMountedAllDone()
        }
        target.prototype.mounted = async function(...params: any[]) {
            await oldMounted.apply(this, params);
            mountedDone = true;
            this.pageIsReady = isCreatedMountedAllDone()
        }
        target.prototype.beforeDestroy = async function(...params: any[]) {
            await oldBeforeDestroy.apply(this, params);
            mountedDone = false;
            createdDone = false;
            this.pageIsReady = false;
        }
        return target
    };
}

export function isPageReady(this: WrapReadyProperty<Vue>) {
    return this.pageIsReady
}

给事件回掉函数和按钮dom添加防抖与loading样式

用于ts环境下的vue

通过装饰器包装被装饰的方法。
要求被包装的方式是async/await的。这样装饰器内只需要用一个await就可以得知被包装的方法是否执行完成。
同时，可以从事件对象中拿到被点击的dom元素并修改它。

/*
 * 请保证被包装的方法的参数列表最后一个是点击事件的参数
 */
export default function buttonThrottle() {
    let pending = false;
    return function(target: any, name: string): any {
        const btnClickFunc = target[name];
        const newFunc = async function(this: Vue, ...params: any[]) {
            if (pending) {
                return;
            }
            const event:Event = params[params.length - 1];
            let btn = event.target as htmlElement
            pending = true;
            const recoverCursor = changeCursor(btn);
            try {
                await btnClickFunc.apply(this, params);
            } catch (error) {
                console.error(error);
            }
            recoverCursor();
            pending = false;
        };
        target[name] = newFunc;
        return target;
    };
}
function changeCursor(btn?: HTMLElement) {
    if (btn == null) {
        return () => {};
    }
    const oldCursor = btn.style.cursor;
    btn.style.cursor = "wait";
    return () => {
        btn.style.cursor = oldCursor;
    };
}

用法:
在点击事件函数上使用这个装饰器。
装饰器会自动检测该函数是否执行完成，并在执行过程中往按钮的Dom节点上添加point:wait属性

    import { Component, Vue } from "vue-property-decorator";
    import buttonThrottle from "@/ui/view/utils/buttonThrottle";


    type Member = { account_no: string; name: string; warn?: string };
    @Component({ components: {} })
    export default class AddMemberInput extends Vue {        @buttonThrottle()
        private async confirmAdd() {
            await this.addMembers(this.getVaildMembers());
        }    
    }

mounted之前显示白屏

用于js的vue中包装vue的对象

同上，通过async/await获得mounted或者created是否执行完成
再通过指向vue实力的this拿到组件根节点，然后按需修改它
以下代码只是将组件隐藏了，实际上可以写更复杂的逻辑，在加载过程中显示其他内容，毕竟拿到了Dom，想干嘛就干嘛。

  function firstPaintControl(vueObj) {
    let oldMounted = vueObj.mounted || function() {};
    vueObj.mounted = async function(...params) {
      this.$el.style.visibility = 'hidden';
      await oldMounted.apply(this, params);
      this.$el.style.visibility = 'visible';
    };
    return vueObj;
  }

本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！

链接: https://fly63.com/article/detial/9771