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正处于试验阶段,所以目前尽量不在上线项目中使用它!!!