我在页面调取数据时,发现明明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监听。
至于第二种方法,还没有实现过,不过应该可行