Skeleton骨架屏在Vue中怎么实现动态切换加载状态？

❤新红提问于 2026-03-18 14:40:23 阅读 6

组件

我在用Vue做用户信息页，想在数据加载时显示骨架屏，加载完就隐藏。但试了好几种写法，骨架屏要么一直显示，要么直接跳过不显示。我是在setup里用ref控制loading状态的，数据请求是用axios发的，理论上逻辑没问题啊。

下面是我的组件代码，结构很简单：一个loading变量控制骨架屏和真实内容的显示。但实际运行时，页面总是直接渲染真实数据，骨架屏一闪而过甚至看不到。是不是因为数据返回太快？还是我的条件渲染写错了？

<template>
  <div>
    <el-skeleton v-if="loading" :rows="4" />
    <div v-else>
      <h2>{{ userInfo.name }}</h2>
      <p>{{ userInfo.email }}</p>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { getUserInfo } from '@/api/user';

const loading = ref(true);
const userInfo = ref({});

onMounted(async () => {
  userInfo.value = await getUserInfo();
  loading.value = false;
});
</script>

反馈组件

我来解答赞 4 收藏

反馈

1 条解答

润恺 Lv1

骨架屏一闪而过基本就是数据返回太快导致的。你想啊，axios请求可能几十毫秒就回来了，loading从true变false几乎是瞬间完成，用户根本来不及看清骨架屏。

最直接的解决办法是加个延迟，人为给骨架屏留出展示时间：

如果你的接口本身就很快，这个延迟体感上基本无感知，但骨架屏至少能完整显示一下，不会显得那么突兀。

另外还有个潜在问题要注意：如果你用的是Element Plus的el-skeleton，它本身是有动画效果的，但你这里rows="4"可能不太够，可以根据实际内容调大一点，让视觉上更接近真实内容。

2026-03-18 15:07