vue列表空状态在接口返回结果前会闪现一下

vue列表空状态在接口返回结果前会闪现一下，用户体验很不好，如何解决这个问题呢

1、首先需要定义loading变量，并设置初始值为true

export default {
  data() {
    return {
       loading: true,
       list: [],
    }
  }
}

2、然后再请求接口方法中，对列表进行赋值和修改loading的值

getData() {
   this.loading = true
   this.$axios.get(`url`)
   .then(res=>{
      if(res.data.code == 200) {
         this.list = res.data.data
         this.loading = false
      } else {
        this.loading = true
      }
   })
}

3、最后在html中使用，为空的html显示的条件必须是list的length为0,并且loading为false

<div v-loading="loading">
   <div v-if="list.length"><!-- 列表内容 --></div>
   <div v-if="!list.length && !loading" >列表为空</div>
</div>

这样就可以解决列表空状态在接口返回结果前会闪现一下的问题了