场景描述

所谓“展示性组件”，就是说我们需要请求后端数据，然后进行页面的渲染的组件，又因为是一个路由组件，所以异步请求的逻辑一般是在beforeEnter等路由守卫中的，即路由切换到当前组件前执行请求逻辑。

问题所在

异步请求逻辑的执行时机是要晚于组件挂载的，也就是说，组件挂载时是无法正确访问后端数据的，所以这就需要我们用一个响应式数据loading去标识后端数据的请求情况，然后模版中可以使用条件渲染等手段，让这个loading收集依赖（通俗的说就是在html里面使用这个loading变量），在异步逻辑请求完成之时修改loading的值从而触发组件的patch，即页面的重新渲染。

当然为了优化用户体验，我们可以准备一个loading为true时（请求的数据到来之前）的loading提示组件。（以及请求来的数据为空时，一个no-data组件，随意发挥）

代码示例

以我公司项目里的一个路由组件为例，这个组件所需的数据就是在组件加载之前进行请求（符合上面描述的场景）

<template>
    <div class="data-box">
        <span class="data-box-label" :data-index="loading">每日精选：每天更新，基于你的职业画像，精选多类别课程，拓展知识边界。</span>
        <loading class="recommend-loading" v-if="loading" />
        <no-data v-else-if="cardData.length === 0" no-height="300px"/>
        <div class="data-box-list" v-else>
            <recommend-card v-for="i in cardData" :key="i.courseId" :data="i" />
        </div>
    </div>
</template>

注释：可以清晰的看出来这个组件的内容部分是一个if - else if - else的选择渲染逻辑，即在loading变量为true时，这个组件内容部分就会渲染<loading />组件，当loading状态改变（自然是在请求数据到达之后，修改loading值为false），其依赖被触发，即页面重新渲染，根据服务端响应的数据是否为空选择性渲染数据内容或者<no-data />组件。