vue 进入页面展示问题

Question

我现在遇到这样一个问题：

<template>
    <div id="test">
       <div v-if="list.length">
           //展示数据
        </div>
       <div v-if="!list.length">
        //没有数据的 报空样式    
    </div>
    </div>
</template>

...
<script>
    ...
    data(){
        return {
            list:[]
        }
    }
</script>

描述：

• 现在list 初始赋值 是一个异步的行为 在mounted发生
• 而以上这样的写法 默认进来就是显示没有数据的样式，一旦数据发生的变更，页面一闪，替换显示数据，给人感觉很不好，因为并不是没有数据而是数据还没传递过来，我希望进入页面是空的 而不是上来就显示没有数据的样式
• 我是这样解决的 我在 #test 上加上一个 v-if=“false” 知道 初始异步请求结束才赋值为true，这样保证了页面刚进来看到的不是没有数据的样式

q:大家是怎么处理这种情况，感觉这样做是不是很多余，vue是不是提供了更好的解决方案或是大家有没有更好的方案？

补充：另，现在进入页面的入口是导航里的一个链接， 如 @tony_gong 所说 ，进入路由之前拉取数据 ,如果后端服务稍微不给力，用户得到的感知 岂不是 点链接没有反应，是不是更不妥？

Answer 1

没有。从框架的角度来说，如果连空数据的设计都包含进来，无疑增加了各种负担，并且没有什么收益。

不过细节上你可以使用 v-if 和 v-else。

Answer 2

你这个思路已经很接近了，你加第三个状态表示数据还没来就行了。拿到数据后再切换有无

Answer 3

这是一种方案，其实还有另外一种方案就是进去路由之前拉取数据

Answer 4

你可以加个loading图标