活用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。使用这个装饰器时,在业务代码中完全无感,没有任何心智负担。

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

用于ts环境下的vue

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

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

3、mounted之前显示白屏

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

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

转载于:WEB 前端学习圈

给TA买糖
共{{data.count}}人
人已赞赏
前端技术

能用CSS实现的就不用麻烦JavaScript

2021-12-22 22:03:23

前端技术

第一人称视角带你走进 Vue 源码世界

2021-12-22 22:15:30

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索