当前位置：首页 > VUE

vue实现suspense

2026-01-07 19:16:05VUE

Vue 3 中实现 Suspense

Suspense 是 Vue 3 引入的一个内置组件，用于处理异步依赖的加载状态。它允许在等待异步组件或异步数据加载时显示一个后备内容（fallback），直到异步操作完成。

基本用法

Suspense 需要与异步组件或 async setup() 一起使用。以下是一个基本示例：

<template>
  <Suspense>
    <template #default>
      <AsyncComponent />
    </template>
    <template #fallback>
      <div>Loading...</div>
    </template>
  </Suspense>
</template>

<script>
import { defineAsyncComponent } from 'vue'

const AsyncComponent = defineAsyncComponent(() =>
  import('./components/AsyncComponent.vue')
)

export default {
  components: {
    AsyncComponent
  }
}
</script>

使用 async setup()

Suspense 也可以与组件的 async setup() 一起使用，处理异步数据加载：

<template>
  <Suspense>
    <template #default>
      <UserProfile />
    </template>
    <template #fallback>
      <div>Loading user data...</div>
    </template>
  </Suspense>
</template>

<script>
import { ref } from 'vue'

export default {
  components: {
    UserProfile: {
      async setup() {
        const user = await fetchUserData()
        return { user }
      },
      template: '<div>{{ user.name }}</div>'
    }
  }
}

async function fetchUserData() {
  // 模拟 API 调用
  return new Promise(resolve => {
    setTimeout(() => {
      resolve({ name: 'John Doe' })
    }, 2000)
  })
}
</script>

错误处理

可以使用 onErrorCaptured 钩子捕获 Suspense 中的错误：

<template>
  <div v-if="error">{{ error.message }}</div>
  <Suspense v-else @error-captured="handleError">
    <!-- ... -->
  </Suspense>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const error = ref(null)

    const handleError = (err) => {
      error.value = err
      return false // 阻止错误继续向上传播
    }

    return { error, handleError }
  }
}
</script>

嵌套 Suspense

Suspense 可以嵌套使用，每个 Suspense 可以有自己的加载状态：

<template>
  <Suspense>
    <template #default>
      <ParentComponent />
    </template>
    <template #fallback>
      <div>Loading parent...</div>
    </template>
  </Suspense>
</template>

<script>
const ParentComponent = {
  template: `
    <div>
      <Suspense>
        <template #default>
          <ChildComponent />
        </template>
        <template #fallback>
          <div>Loading child...</div>
        </template>
      </Suspense>
    </div>
  `,
  components: {
    ChildComponent: defineAsyncComponent(() => 
      import('./ChildComponent.vue')
    )
  }
}
</script>