Nuxt 3应用中UI加载Spinner无法正常显示的问题求助

你的问题核心是加载状态逻辑执行时机或模板语法的小问题，以下是具体分析和修复方案：

可能的原因及修复 #

1. 模板中ref变量的不必要.value访问 #

在Vue 3的<script setup>中，ref变量在模板里会自动解包，不需要手动加.value。虽然语法上允许写loading.value，但可能在SSR/hydrate过程中导致状态识别异常。

修改模板条件：

<div v-if="loading" class="loader">
  <!-- 加载器内容 -->
</div>
<v-container fluid fill-height v-else>
  <!-- 内容容器 -->
</v-container>

2. 不必要的nextTick包裹 #

onMounted本身就是在DOM挂载完成后执行，再嵌套nextTick会延迟请求执行时机，导致loading状态的切换被推迟，甚至可能因为请求完成太快，Spinner还没渲染就被隐藏。

移除nextTick，直接在onMounted中执行请求：

onMounted(async () => {
  try {
    console.log(loading.value) // 正确输出true
    const {data} = await useFetch<IData>('/data.json')
    if (data && data.value && data.value.education) {
        eduTimeline.value = data.value.education;
    }
  } catch (error) {
    console.error(error);
  } finally {
    loading.value = false
    console.log(loading.value) // 正确输出false
  }
});

3. 请求完成过快导致Spinner一闪而过 #

即使限制网速，本地data.json文件的加载速度依然可能极快，导致Spinner显示时间太短无法被察觉。可以给loading状态添加最小显示时长：

onMounted(async () => {
  try {
    console.log(loading.value)
    const {data} = await useFetch<IData>('/data.json')
    if (data && data.value && data.value.education) {
        eduTimeline.value = data.value.education;
    }
  } catch (error) {
    console.error(error);
  } finally {
    // 确保Spinner至少显示500ms
    await new Promise(resolve => setTimeout(resolve, 500));
    loading.value = false
    console.log(loading.value)
  }
});

4. Nuxt 3 useFetch的SSR预取特性 #

如果/data.json在服务器端已经被预取，客户端会直接获取缓存数据，导致请求瞬间完成。可以强制useFetch仅在客户端执行：

const {data} = await useFetch<IData>('/data.json', {
  server: false
})

验证方法 #

• 修复后，打开浏览器开发者工具的网络面板，选择"Slow 3G"限速，然后刷新页面，观察Spinner是否显示。
• 可以临时在finally块中注释掉loading.value = false，确认Spinner能正常渲染。

内容的提问来源于stack exchange，提问作者existentia