Vue3中异步组件与Suspense的结合使用

Vue3引入了一些新的特性，其中包括异步组件和Suspense，异步组件是一种优化技术，用于延迟加载和渲染组件，以提高应用的性能。

一、什么是异步组件？

异步组件可以让我们将应用分割成更小的代码块，并且只在需要时才加载这些代码块。这对于提高应用的首屏加载速度非常有帮助。

在Vue3中，我们可以使用defineAsyncComponent方法定义异步组件：

import { defineAsyncComponent } from 'vue'

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

二、异步组件结合Suspense使用

以下用到了naiveui中的轮播图Carousel组件库，请先安装naiveui
npm i -D naive-ui

// ParentComponent.vue
<template>
  <div>
    <h2>父组件</h2>
    <Suspense>
      <template #default>
        <ChildComponent />
      </template>
      <template #fallback>
        <div>加载中...</div>
      </template>
    </Suspense>
  </div>
</template>
<script setup lang="ts">
  import { ref, defineAsyncComponent } from "vue";
  const ChildComponent = defineAsyncComponent(
    () => import("@/views/ChildComponent/ChildComponent.vue")
  );
</script>

// ChildComponent.vue
<template>
  <n-carousel autoplay>
    <img
      v-for="(item, index) in pageView"
      :key="index"
      class="carousel-img"
      :src="item"
    />
  </n-carousel>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { NCarousel } from "naive-ui";
import { $http } from "@/serve/axios";
interface IPageView {
  data: string[];
}
const pageView = ref<string[]>([]);
const { data } = await $http.get("./data.json");

pageView.value = data;
</script>
<style scoped>
.carousel-img {
  width: 100%;
  height: 240px;
  object-fit: cover;
}
</style>


<style scoped></style>

在data.json中的数据为

{
  "data": [
      "https://naive-ui.oss-cn-beijing.aliyuncs.com/carousel-img/carousel1.jpeg",
      "https://naive-ui.oss-cn-beijing.aliyuncs.com/carousel-img/carousel2.jpeg",
      "https://naive-ui.oss-cn-beijing.aliyuncs.com/carousel-img/carousel3.jpeg",
      "https://naive-ui.oss-cn-beijing.aliyuncs.com/carousel-img/carousel4.jpeg"
  ]
}

效果图

异步组件实现效果

在效果图我们可以看见，通过结合异步组件和Suspense，我们可以创建一个在加载异步组件时显示加载指示器的应用。当然，为了提高用户体验，你也可以在加载中采骨架屏的形式

三、使用异步组件时遇到的问题及注意

3.1 异步组件必须和Suspense组件一起使用

我们更改父组件的引用方式，采取一般引用，代码如下

// ParentComponent.vue
<template>
  <div>
    <h2>父组件</h2>
    <ChildComponent />
  </div>
</template>
<script setup lang="ts">
import { ref, defineAsyncComponent } from "vue";
import ChildComponent from "@/views/ChildComponent/ChildComponent.vue";
</script>

<style scoped></style>

这个时候我们会发现页面效果加载不出来并在控制台上出现提示

这个错误信息表示你正在使用 Vue 3 中的异步 setup() 函数，但是你没有在父组件树中找到 边界。如果你想要渲染一个具有异步 setup() 的组件，你必须将它嵌套在 中。

3.2 谨慎使用Suspense

以上信息是官网上和控制台上的提示，Suspense正处于试验阶段，所以目前尽量不在上线项目中使用它！！！

3.3 async尽量不要写在生命周期上

以下是我将async写在onMOunted的代码

在页面中出现以下错误

通过大量查找资料还是没有得以解决。若有小伙伴知道报错原因请及时告诉我一声，非常感谢

最后不得以，我用一个函数，在函数中采用async，async方式，发现错误得以解决

四、总结

通过结合异步组件和Suspense，我们可以创建一个在加载异步组件时显示加载指示器的应用。这可以提供更好的用户体验，因为用户可以明确地看到应用正在加载内容，而不是看到一个空白的屏幕
当然，还是要注意Suspense正处于试验阶段，所以目前尽量不在上线项目中使用它！！！