vue中created调用后,为什么mouted获取不到调用后的值

我在页面调取数据时,发现明明created周期已经进行了数据的获取,为什么mouted周期访问该数据,却是空的情况?

原来还是异步的原因

首先,在created周期调用methods中的一个函数A,其中函数A将获取的接口数据赋值给了this .entre

created(){
  this.A();
}

methods:{
 A(){
    this.$https.get('接口',{数据名:数据值,....})
    .then(
     (res)=>{this.entre=res.data.data}
    )
  }
}

但是在mounted周期阶段时,直接调用this.entre返回的却是unfinished。

按照vue生命周期来说,mounted周期在created周期之后,应该可以访问到this.entre

但由于我们调取的$http是异步访问接口的操作,所以在created周期执行完成乃至mounted周期执行完成之后,这个数据都可能还未调取出来

所以如果想要在获取到对应数据this.entre之后,再进行对相关数据的操作,可以有以下几种方式:

第一种:在data那个先定义一下entre,然后通过监视属性watch监视entre,如果它由空变为了获取成功后的值,那么就会触发watch中对应的内容

data(){
   return{
      entre:'',
     suer:'',
   }
}


watch:{
 entre(){
  if(this.entre.user){
     this.suer=this.entre.user;
   }
}

第二种:在mounted周期进行一个异步函数,await等待this.A()函数执行后,再对this.entre获取到的数据进行处理

mounted(){
 anysc()=>{
  awiat this.A();
  this.suer=this.entre.user;
}

第一种方式是已经试验过的,真实有效,但是需要考虑到其他部分调this.A函数,如果接口中的数据改变,还是可能会触发watch监听。

至于第二种方法,还没有实现过,不过应该可行

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值