vue3.x的Suspense详细解读

Suspense 是 Vue 3.x 中引入的一个新特性，主要用于处理异步组件的加载状态。它允许在等待异步组件加载时显示一个后备内容（fallback），从而提升用户体验。

1. 基本用法

Suspense 的基本语法如下：

<template>
  <Suspense>
    <template #default>
      <AsyncComponent />
    </template>
    <template #fallback>
      <div>加载中...</div>
    </template>
  </Suspense>
</template>

<script>
import { defineAsyncComponent } from 'vue';

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

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

在这个例子中，AsyncComponent 是一个异步组件，Suspense 会在 AsyncComponent 加载完成之前显示 fallback 中的内容（即“加载中...”）。

2. #default 插槽

#default 插槽用于放置异步组件。当异步组件加载完成后，Suspense 会渲染这个插槽中的内容。

3. #fallback 插槽

#fallback 插槽用于放置加载中的提示内容。在异步组件加载完成之前，Suspense 会渲染这个插槽中的内容。

4. 多个异步组件

Suspense 可以同时处理多个异步组件，只有当所有异步组件都加载完成后，Suspense 才会渲染 #default 插槽中的内容。

<template>
  <Suspense>
    <template #default>
      <AsyncComponent1 />
      <AsyncComponent2 />
    </template>
    <template #fallback>
      <div>加载中...</div>
    </template>
  </Suspense>
</template>

<script>
import { defineAsyncComponent } from 'vue';

const AsyncComponent1 = defineAsyncComponent(() =>
  import('./AsyncComponent1.vue')
);
const AsyncComponent2 = defineAsyncComponent(() =>
  import('./AsyncComponent2.vue')
);

export default {
  components: {
    AsyncComponent1,
    AsyncComponent2
  }
};
</script>

5. 错误处理

Suspense 还提供了错误处理机制。如果异步组件加载失败，可以通过 onErrorCaptured 钩子来捕获错误。

<template>
  <Suspense @error-captured="handleError">
    <template #default>
      <AsyncComponent />
    </template>
    <template #fallback>
      <div>加载中...</div>
    </template>
  </Suspense>
</template>

<script>
import { defineAsyncComponent } from 'vue';

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

export default {
  components: {
    AsyncComponent
  },
  methods: {
    handleError(error) {
      console.error('加载组件时出错:', error);
      // 可以在这里处理错误，例如显示错误提示
    }
  }
};
</script>

6. 与 Transition 结合使用

Suspense 可以与 Transition 组件结合使用，以实现加载完成时的过渡效果。

<template>
  <Suspense>
    <template #default>
      <transition name="fade">
        <AsyncComponent />
      </transition>
    </template>
    <template #fallback>
      <div>加载中...</div>
    </template>
  </Suspense>
</template>

<script>
import { defineAsyncComponent } from 'vue';

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

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

<style>
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}
</style>

7. 注意事项

• Suspense 目前仍处于实验性阶段，API 可能会在未来版本中发生变化。

• Suspense 只能处理异步组件的加载状态，不能处理普通的异步操作（如 API 请求）。

8. 总结

Suspense 是 Vue 3.x 中一个非常有用的特性，简化了异步组件加载状态的管理。通过 #default 和 #fallback 插槽，在异步组件加载完成之前显示一个后备内容，从而提升用户体验。此外，Suspense 还提供了错误处理机制，并且可以与 Transition 组件结合使用，以实现更丰富的交互效果。