VUE3，页面加了 keepAlive 之后 able 组件的 v-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` 组件就不会被渲染。

@Happy66606 感谢大佬，我试了一下 activated 钩子的方法，好像还是不太行啊，就是请求完一次数据之后，组件被缓存，第二次进入也没有 loading 的这个问题。现在就是第一次进入页面，v-loading 还是不生效。再次感谢！我再自己研究一下

你的数据加载写在什么地方的

@fishlium 写在 onBeforeMount 钩子里的

@coollest 你写 onMounted()的试试

@fishlium 昨晚忘了回复了，还是不行。但是还是谢谢大佬！

@coollest 你把 v-if 换到 component 上试试呢

@fishlium 昨晚发现这个问题了，如果按照帖子里的写法 keepAlive 就直接失效了，放在 component 上才能正常生效。但是还是没有 loading 的效果

有复现 demo 吗 用 setTimeout 模拟数据请求

@0xD800 差不多是这样的

<script lang="ts" setup>
import axios from 'axios';
import { ElLoading } from 'element-plus'
import { onMounted } from 'vue';
let loadingInstance:any = null

function getData() {
let res:any = axios.post('xxx')
if (res && res.success) {
loadingInstance.close()
} else {
//报错提示
loadingInstance.close()
}
}
onMounted(() => {
loadingInstance = ElLoading.service({fullscreen: true})
//请求数据
getData()
})
</script>