1. 给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」
  1. 按钮装璜器
用于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());        }        }
  1. mounted之前显示白屏

同上，通过async/await取得mounted或者created是否执行实现
再通过指向vue实力的this拿到组件根节点，而后按需批改它
以下代码只是将组件暗藏了，实际上能够写更简单的逻辑，在加载过程中显示其余内容，毕竟拿到了Dom，想干嘛就干嘛。

用于js的vue中包装vue的对象
  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;  },