在vue的mouted生命周期函数中拿不到data中的数据

    在created中能拿到数据,如果在mounted中数据写死页面会渲染静态的数据,但如果通过ajax请求拿到的数据当页面渲染就没有数据显示出来,通过后台打印数据发现mounted拿到的数据是空的。

    因为mounted并不是等created中的代码都执行后再执行,created中的同步代码做完后,mounted执行其中的同步代码,然后created再执行其中的异步代码,而ajax请求回数据是异步代码并且是微任务,所以就造成了在mounted拿数据是空的情况。

解决:给mounted中的同步任务加一个settimeout定时器,定的时间比ajax请求回来数据的时间长即可。

mounted() {
    setTimeout(()=>{
       this.ref_date = this.list.map((item) => item.ref_date);
       console.log(this.ref_date)
    },1

  • 2
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Vue生命周期函数包括beforeCreate、created、beforeMountmounted、beforeUpdate、updated、beforeDestroy和destroyed。beforeCreate是在Vue实例被创建之前调用的,此时data和methods还未初始化,不能访问DOM,可以在此函数进行一些初始化的操作。created是在Vue实例被创建之后调用的,此时data和methods已经初始化完成,可以访问DOM,可以在此函数请求数据、更新数据等操作。beforeMount是在Vue实例挂载到DOM之前调用的,此时模板还未编译成DOM,可以在此函数进行一些准备工作。mounted是在Vue实例挂载到DOM之后调用的,此时模板已经编译成DOM,可以进行DOM操作。beforeUpdate是在数据更新之前调用的,可以在此函数进行一些更新前的操作。updated是在数据更新之后调用的,可以在此函数进行一些更新后的操作。beforeDestroy是在Vue实例销毁之前调用的,可以在此函数进行一些清理工作。destroyed是在Vue实例销毁之后调用的,此时Vue实例已经完全销毁,可以进行一些最终的清理工作。123 #### 引用[.reference_title] - *1* *3* [Vue生命周期函数详解](https://blog.csdn.net/wen110898/article/details/120520844)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}} ] [.reference_item] - *2* [Vue 生命周期函数](https://blog.csdn.net/xyfck/article/details/126909930)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}} ] [.reference_item] [ .reference_list ]

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值