Vue created/mounted 异步获取不到data中的数据

最近在开发时遇到了个小坑,在没详细了解Vue的生命周期前,总以为mounted函数一定会在created函数完成后执行,但实则不然。

如果呈现在页面上的数据是静态的,比如说像下面这样数据是写死不变化的,那么mounted函数中的方法获取模型层中的这些值是能获取的↓

export default {
    data() {
        return {
			dataList: [1,23,45,6]
        };
    },

注意注意注意!但如果大家的模型层数据是从后台动态响应返回的,那么你肯定会遇到这么一个问题,为什么我mounted函数中的方法获取模型层数据是空的了??

经过我查看了:Vue.js 生命周期官方介绍,我才了解到:created和mounted执行时,异步初始化还没执行(还没执行完),也就是created里的数据还没获取到,mounted就开始了渲染视图的工作,那么这时模型层数据肯定就是为空的啦,而mounted只会调用一次,这就陷入了一个死局,mounted永远等不到created获取完数据后在渲染,那么解决的方法就是为mounted中的方法设置一个定时器,因为created获取数据的速度是很快的,我们只用让mounted停那么一丢丢时间就ok了!

解决方法:设定等待一个时间,确保你的初始值都已经被初始化在渲染视图

 mounted:function() {
           setTimeout(() => {
                this.draw();
            }, 1000)
        },

本次分享到此结束,谢谢大家阅读!!
最近忙着各种项目,博客会尽量更新的!!

  • 41
    点赞
  • 27
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 34
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

何壹时

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

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

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

打赏作者

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

抵扣说明:

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

余额充值