VUE3，页面加了 keepAlive 之后 table 组件的 v-loading 失效

App.vue 里边的代码是

        <el-main class="container">
                <router-view v-slot="{ Component }">
                        <keep-alive v-if="$route.meta.keepAlive">
                                <component :is="Component" :key="$route.path"  />
                        </keep-alive>
                        <component :is="Component" :key="$route.path" v-else/>
                </router-view>
        </el-main>

页面中只在 table 组件上加了 v-loading ，请求数据前设置为 true ，得到数据后为 false 。现在的问题是第一次进

入页面加载数据时，table 会直接显示 no data ，而不是 loading 转圈。各位大佬有遇到过这个问题吗，求教。

这是因为 `keep-alive` 缓存了组件的状态，当你再次进入页面时，组件不会被重新渲染，而是直接从缓存中取出之前的状态。因此，`v-loading` 的状态也不会被重新设置。

你可以尝试在组件的 `activated` 生命周期钩子中手动设置 `v-loading` 的状态。例如：

```javascript
activated() {
  this.loading = true;
  // ... 请求数据 ...
}
```

或者，你可以使用 `keep-alive` 的 `include` 属性来排除某些组件不被缓存。例如：

```html
<keep-alive :include="['Home', 'About']">
  <!-- ... -->
</keep-alive>
```

这样，`table` 组件就不会被缓存，`v-loading` 的状态就会被正常设置。

另外，你也可以尝试使用 `v-if` 来控制 `table` 组件的渲染，例如：

```html
<table v-if="!loading" v-loading="loading">
  <!-- ... -->
</table>
```

这样，当 `loading` 为 `true` 时，`table` 组件就不会被渲染。