切换v-if时插槽未重新渲染？Vue组件渲染异常求助

核心问题分析 #

1. props传递断裂
   Template.vue组件接收了isLoading属性，但并未将其传递给内部的IsLoading组件，导致IsLoading的加载状态始终未与父组件同步，无法正确切换显示内容。

2. 根节点类型动态切换导致DOM不匹配
   IsLoadingComponent.vue的根节点是条件渲染的两种不同类型：加载状态时是<div>，非加载状态时直接渲染slot内容（无容器元素）。这种根节点类型的变化，在SSR hydration后的动态更新阶段，会导致Vue虚拟DOM与真实DOM结构不匹配，最终触发Vue的 fallback 处理，将内容包裹在<template>文档片段中。

3. fetch方法逻辑错误
   Component.vue中的fetch方法（注意：不要用浏览器全局APIfetch作为自定义方法名）在finally块中错误地将isLoading设为true，导致无论异步操作成功与否，最终加载状态都会保持为true，进一步加剧了内容无法正常显示的问题。

修复步骤 #

1. 修复Template.vue的props传递

给IsLoading组件绑定isLoading属性，确保状态同步：

<!-- Template.vue -->
<template>
   <Header/>
   <IsLoading :isLoading="isLoading">
      <slot></slot>
   </IsLoading>
</template>

<script setup>
defineProps<{isLoading: boolean}>()
</script>

2. 给IsLoadingComponent添加根容器

将条件渲染的内容包裹在统一的容器中，保证根节点类型始终一致：

<!-- IsLoadingComponent.vue -->
<template>
   <div class="is-loading-wrapper">
      <div class="loading-spinner" v-if="isLoading"></div>
      <slot v-else></slot>
   </div>
</template>

<script setup>
defineProps<{isLoading: boolean}>()
</script>

3. 修正fetch方法的逻辑

修改finally块的赋值逻辑，同时避免使用全局APIfetch作为方法名：

<!-- Component.vue -->
<template>
   <Template :isLoading="isLoading">
      <form>...</form>
   </Template>
</template>

<script setup>
const isLoading = ref(false)
async function fetchData() {
  isLoading.value = true
  try {
    await someAsyncOperation() // 等待异步操作完成
  } finally {
    isLoading.value = false // 异步结束后关闭加载状态
  } 
}
</script>

内容的提问来源于stack exchange，提问作者Le Hoang Long