vue中mounted周期无法获取created的异步数据完美解决办法

        最近写练习项目的时候,用到了echart,官方推荐的是在mounted下进行表格配置,然而很多时候数据都是来源于异步ajax,问题来了,在这里尝试使用create下获取的异步的data数据,结果报错说undefined,这里提前在data下声明过变量名,哪怕在定义created时声明了async使用await阻塞,依旧无法获取。

        查询之后发现说这个东西是,vue生命周期函数之间不会被阻塞,后一个生命周期不一定会等前一个完全执行完再执行,目前在csdn下搜到的解决方案主要有

        1、在mounted下使用定时器设置异步任务,但是这个缺点很明显,因为这个时间不好掌握,异步请求时间太长还是会报undefined,太短就浪费了时间

        2、在watch下监听请求的数据,一旦发现请求到之后再进行操作,这个方法我觉得很奇怪,created的时候监听器感觉为时过早,不适合使用,但是实际使用确实不会有什么大的问题除非监听器还要做别的事情,那这样怎么分配两个任务,条件判断可能又会麻烦

        这里提出来另一种方法,$emit方法,vue2的兄弟组件共享数据和子向父传值的一个方案,不过这里不是用bus.$emit,而是直接使用组件自己的$emit,$emit主要是用来触发事件,在mounted下$on监听自己的这个事件,代码例如这张图330dfe37dd0c44df9da4396bcb35a61f.jpg

        若我们以伪代码的形式去操作,可以写成这样

// 伪代码形式
async created(){
  let a = await ajaxOperate
 this.a = a
 ...
 //ajaxOver
 this.$emit('requestOver')
 //或者可以
 this.$emit('requestOver',a)
},
async mounted(){
 console.log(this.a);//undefined
 this.$on('requestOver',()=>{
  console.log(this.a);//得到正确数据
  operate()
 })
 // 或者
 this.$on('requestOver',(a)=>{
  console.log(a);//得到正确数据
  operate()
 })
}

        在created下进程会被await阻塞,异步进程完成以后会再在这里触发事件,那么直接在mounted下监听这个事件就可以直接使用获取到的异步数据了,相比于watch的优点也很明显,至少不会影响watch的正常使用,毕竟watch的设计不是用来做这个的,其次就是不用担心方案1的时间控制问题,让组件自己触发,办法至少应该是比现有两种方案好一些的,不知道这个办法算不算猴头第一次被提出啊啊啊我好激动了。

        (楼主是湖南某本科学校心理学的学生,对于编程的学习纯属感兴趣,学过爬虫,写这篇文章的时候刚学完vue2,准备做完一个自己的全栈项目之后再学习vue3,因为学习过的东西有限,自己非科班出生,见解可能有些狭隘,如果有不对的地方欢迎批评指正,友好交流,一起进步😉)

  • 17
    点赞
  • 21
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 10
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 10
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

哥们又来写bug啦

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值