Vue3 <Suspense＞正确使用指南与注意事项

<template>
  <div>
    <Suspense>
        <template #default><asyncShow/></template>
        <template #fallback>
          <p>loading...</p>
        </template>
      </Suspense>
  </div>
</template>
<script setup lang="ts">
import asyncShow from '../components/asyncShow.vue'
</script>

<template>
  <div>
     <div>{{ result }}</div>
  </div>
</template>
<script setup lang="ts">
  // const result=new Promise((resolve)=>{
  //   setTimeout(()=>{
  //     resolve('hello world')
  //   },3000)
  // })  
  // 出现的问题：返回值result没有直接显示为字符串
  // 代码优化1：
  // import { ref, onMounted } from 'vue'
  // const result = ref<string>('')
  // onMounted(async () => {
  //   result.value = await new Promise<string>((resolve) => {
  //     setTimeout(() => {
  //       debugger;
  //       resolve('hello world')
  //     }, 5000)
  //   })
  // })
  // 出现的问题：<Suspense> 的 fallback 槽没有显示。
  // 代码优化2：
  // 使用顶层 await，使组件成为异步组件
  const result = await new Promise((resolve) => {
    setTimeout(() => {
      resolve('hello world')
    }, 3000)
  })
</script>

<Suspense>
  <template #default>
    <!-- 异步组件 -->
    <AsyncComponent />
  </template>
  <template #fallback>
    <!-- 加载中的显示内容 -->
    <div>Loading...</div>
  </template>
</Suspense>

// 使用 defineAsyncComponent
import { defineAsyncComponent } from 'vue'
const AsyncComponent = defineAsyncComponent(() => 
  import('./AsyncComponent.vue')
)

<script setup>
// 在 <script setup> 中使用顶层 await
const data = await fetchData()
</script>

// 组件返回一个 Promise
export default {
  async setup() {
    const data = await fetchData()
    return { data }
  }
}

<script setup>
// 普通同步组件 - Suspense 不会生效
const data = '同步数据'
</script>

<template>
  <Suspense>
    <template #default><AsyncShow /></template>
    <template #fallback>
      <h3>loading...</h3> <!-- 这个不会显示 -->
    </template>
  </Suspense>
</template>
<script setup>
// ❌ 错误：这不是真正的异步组件
import AsyncShow from './AsyncShow.vue'
</script>

<script setup>
import { defineAsyncComponent, ref, computed } from 'vue'
// ✅ 正确：使用动态导入创建异步组件
// 第一种：简洁，自动处理 .default
const AsyncShow = defineAsyncComponent(() => 
  import('../components/AsyncShow.vue')
)
//第二种：显式，可以在加载过程中添加额外逻辑
const asyncShow = defineAsyncComponent(async () => {
  // 添加日志、条件判断等逻辑
  const module = await import('../components/asyncShow.vue')
  return module.default
})
// 示例1：动态决定加载哪个组件
const componentType = ref('A')
const DynamicComponent = computed(() => {
  return defineAsyncComponent(() => {
    // 使用第二种写法可以添加逻辑
    if (componentType.value === 'A') {
      return import('./ComponentA.vue')
    } else {
      return import('./ComponentB.vue')
    }
  })
})
// 或者使用 async 函数
const loadComponent = async (type) => {
  if (type === 'admin') {
    const module = await import('./AdminPanel.vue')
    return module.default
  } else {
    const module = await import('./UserPanel.vue')
    return module.default
  }
}
//示例2：需要错误处理和加载状态时，使用配置对象形式
// 加载中组件 
import LoadingSpinner from './LoadingSpinner.vue'
// 错误处理组件
import ErrorMessage from './ErrorMessage.vue'
defineAsyncComponent({
  loader: () => import('./Component.vue'),
  loadingComponent: LoadingComponent,
  errorComponent: ErrorComponent,
  delay: 100,
  timeout: 5000
})
// 示例3：预加载策略
const PreloadComponent = defineAsyncComponent({
  loader: () => import('./PreloadComponent.vue'),
  // 预加载时机
  suspensible: false, // 不挂起父级 Suspense
  // 自定义加载逻辑
  onLoad: () => console.log('开始加载'),
  onComplete: () => console.log('加载完成')
})
</script>

<!-- AsyncShow.vue -->
<script setup>
// ✅ 正确：使用顶层 await
const result = await new Promise((resolve) => {
  setTimeout(() => {
    resolve('hello world')
  }, 3000)
})
</script>

<!-- AsyncShow.vue -->
<script setup>
import { ref, onMounted } from 'vue'
const result = ref('')
// 使用生命周期钩子处理异步
onMounted(async () => {
  result.value = await new Promise((resolve) => {
    setTimeout(() => {
      resolve('hello world')
    }, 3000)
  })
})
</script>

<script setup>
import { ref } from 'vue'
// 最佳实践：使用 ref 结合 async/await
const data = ref(null)
const error = ref(null)
const isLoading = ref(false)
const fetchData = async () => {
  isLoading.value = true
  try {
    data.value = await fetch('/api/data').then(r => r.json())
  } catch (e) {
    error.value = e
  } finally {
    isLoading.value = false
  }
}
// 在适当时机调用
fetchData()
</script>

<template>
  <Suspense>
    <template #default>
      <UserDashboard />
    </template>
    <template #fallback>
      <div class="skeleton-loader">
        <!-- 骨架屏效果 -->
        <div class="skeleton-item"></div>
        <div class="skeleton-item"></div>
        <div class="skeleton-item"></div>
      </div>
    </template>
  </Suspense>
</template>
<script setup>
// 异步组件定义
const UserDashboard = defineAsyncComponent({
  loader: () => import('./UserDashboard.vue'),
  delay: 200, // 延迟显示 loading
  timeout: 5000, // 超时时间
  errorComponent: ErrorComponent, // 错误时显示的组件
  loadingComponent: LoadingComponent // 自定义 loading 组件
})
</script>

<template>
  <Suspense @resolve="onResolve" @pending="onPending" @fallback="onFallback">
    <!-- 组件内容 -->
  </Suspense>
</template>
<script setup>
const onResolve = () => {
  console.log('组件加载完成')
}
const onPending = () => {
  console.log('开始加载组件')
}
</script>

<template>
  <Suspense>
    <template #default>
      <ParentComponent />
    </template>
    <template #fallback>
      外层 Loading...
    </template>
  </Suspense>
</template>
<!-- ParentComponent.vue -->
<template>
  <Suspense>
    <template #default>
      <ChildComponent />
    </template>
    <template #fallback>
      内层 Loading...
    </template>
  </Suspense>
</template>