活用 async/await ，让 Vue 变得更好用的装饰器！

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

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

前两个都是装饰用在ts环境下class写法的vue里的。不过看清楚逻辑后，活用很容易修改成可以用在js环境中的更好vue组件上。

1. 给vue添加一个指示初始化完成的装饰变量。

指业务相关的活用初始化逻辑都完成了 比如搜索功能：搜索中显示loading，结果为空时显示暂无数据。更好但是装饰第一次打开页面时，搜索还没完成，活用但显示暂无数据又不合适 这个时候就需要一个这样的更好变量处理边界情况 用于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)方法；      */  exportdefaultfunction PageReadyStatus() {       let createdDone = false;      let mountedDone = false;      function isCreatedMountedAllDone() {           return createdDone && mountedDone;      }      returnfunction 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 = asyncfunction(...params: any[]) {               await oldCreated.apply(this, params);              createdDone = true;              this.pageIsReady = isCreatedMountedAllDone()          }          target.prototype.mounted = asyncfunction(...params: any[]) {               await oldMounted.apply(this, params);             mountedDone = true;              this.pageIsReady = isCreatedMountedAllDone()          }          target.prototype.beforeDestroy = asyncfunction(...params: any[]) {               await oldBeforeDestroy.apply(this, params);              mountedDone = false;              createdDone = false;              this.pageIsReady = false;          }          return target      };  }  exportfunction isPageReady(this: WrapReadyProperty<Vue>) {       returnthis.pageIsReady  } 

2. 给事件回调函数和按钮Dom添加防抖与loading样式

用于ts环境下的vue。

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

/*   * 请保证被包装的方法的参数列表最后一个是点击事件的参数   */  exportdefaultfunction buttonThrottle() {       let pending = false;      returnfunction(target: any, name: string): any {           const btnClickFunc = target[name];          const newFunc = asyncfunction(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: { } })      exportdefaultclass AddMemberInput extends Vue {         @buttonThrottle()          private async confirmAdd() {               awaitthis.addMembers(this.getVaildMembers());          }      } 

3. mounted之前显示白屏

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

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

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

很赞哦!（91786）