Vue3中Suspense异步加载组件的问题
作者:西魏陶渊明
在我们日常开发中,有些组件里面加载非常慢,导致我们路由跳转的时候回出现卡顿情况。
这个时候我们可以使用异步组件。
Suspense
IconParkSelect 组件因为要读取文件,会有点慢,所以只用异步的方式加载。
<Suspense> <IconParkSelect v-model="currentSelectIcon" :visible="iconVisible" @close="closeIconFormModalVisible" @cancel="closeIconFormModalVisible" @ok="insertIconToItem" /> <!-- 在 #fallback 插槽中显示 “正在加载中” --> <template #fallback> Loading...</template> </Suspense>
Suspense 有两个插槽,当异步组件没有加载完成时候会先选择 fallback 插槽数据。
然后使用异步的方式引入组件。
import { defineAsyncComponen } from 'vue'; // 异步获取图标库 const IconParkSelect = defineAsyncComponent( () => import('@/components/common/IconParkSelect.vue') );
补充:
vue3中的异步组件
什么是异步组件
在Vue中,当我们注册全局或局部组件时,它们都是同步地被“立即解析并加载”的。这意味着在我们的程序初始化时,所有组件都会通过网络被下载到内存中,并且在内存中占用一定的资源。预加载所有组件会将页面的初始加载时间和性能降低,尤其是在移动设备上。为了避免这种情况,Vue.js 提供了异步组件。
为什么要使用异步组件
异步组件可以将我们的组件分开打包,按需要加载,这样可以减轻初始页面加载时间和减少资源浪费。当我们需要和路由配合使用时,异步组件也能帮助我们实现按需加载和动态导入。这样可以在调用组件时再切换路由实现动态加载器组件,有助于提高应用程序的性能和响应速度。
定义异步组件
Vue3中使用defineAsyncComponent()
来定义异步组件,该API的入参是一个返回组件选项的函数,需要使用 () => import()
函数来导入组件。
defineAsyncComponent 方法接收一个返回 Promise 的加载函数。这个 Promise 的 resolve 回调方法应该在从服务器获得组件定义时调用。我们也可以调用 reject(reason) 表明加载失败。
import { defineAsyncComponent } from 'vue' const AsyncComponent = defineAsyncComponent(() => { return new Promise((resolve, reject) => { // ...从服务器获取组件 resolve(/* 获取到的组件 */) }) })
ES 模块动态导入也会返回一个 Promise,所以我们会将它和 defineAsyncComponent 搭配使用。类似 Vite 和 Webpack 这样的构建工具也支持此语法 (并且会将它们作为打包时的代码分割点),因此我们也可以用它来导入 Vue 单文件组件:
import { defineAsyncComponent } from 'vue' const AsyncComponent = defineAsyncComponent(() => import('./components/MyComponent.vue') )
上面代码得到的 AsyncComponent 是一个外层包装过的组件,仅在页面需要它渲染时才会调用加载内部实际组件的函数。
示例代码:
使用 defineAsyncComponent 函数来定义异步组件,它返回一个组件对象:
import { defineAsyncComponent } from 'vue' const AsyncComponent = defineAsyncComponent(() => import('./MyComponent.vue')) export default { components: { AsyncComponent } }
上面定义了一个异步组件,组件通过 components
对象进行注册。
异步组件的加载与错误状态
我们在进行异步操作时,不可避免地会涉及到网络加载慢和加载错误的情况,vue在设计defineAsyncComponent() 组件时也考虑到了这种情况,它为我们提供了两个配置项即:加载异步组件时使用的组件loadingComponent
和加载失败后展示的组件errorComponent
。我们需要创建两个自定义组件LoadingComponent.vue 和 ErrorComponent.vue组件,作为上面两个配置项使用
示例代码如下
const AsyncComp = defineAsyncComponent({ // 加载函数 loader: () => import('./MyComponent.vue'), // 加载异步组件时使用的组件 loadingComponent: LoadingComponent, // 展示加载组件前的延迟时间,默认为 200ms delay: 200, // 加载失败后展示的组件 errorComponent: ErrorComponent, // 如果提供了一个 timeout 时间限制,并超时了 // 也会显示这里配置的报错组件,默认值是:Infinity timeout: 3000 })
上述代码在页面加载时,先加载LoadingComponent组件,在加载组件显示之前有一个默认的 200ms 延迟。如果加载失败,则会调用ErrorComponent组件,还可以指定一个超时时间timeout,在请求耗时超过指定时间时也会渲染报错组件。
搭配 Suspense 使用
什么是Suspense
Suspense是一个内置的组件,可以将子组件的加载状态统一管理,包括异步组件的加载状态。它可以在异步加载组件的时候有一个loading状态,等异步组件创建好之后,再显示组件。
Suspense 组件有两个插槽:#default 和 #fallback。两个插槽都只允许一个直接子节点。
在初始渲染时,Suspense 将在内存中渲染其默认的#default插槽内容。如果在这个过程中遇到任何异步依赖,则会进入挂起状态。在挂起状态期间,展示的是#fallback后备内容。当所有遇到的异步依赖都完成后,Suspense 会进入完成状态,并将展示出默认插槽#default的内容。
如果在初次渲染时没有遇到异步依赖,Suspense会直接进入完成状态。
进入完成状态后,只有当默认插槽#default的根节点被替换时,Suspense才会回到挂起状态。组件树中新的更深层次的异步依赖不会造成 Suspense回退到挂起状态。
发生回退时, #fallback后备内容不会立即展示出来。相反,Suspense在等待新内容和异步依赖完成时,会展示之前 #default 插槽的内容。这个行为可以通过一个 timeout prop 进行配置:在等待渲染新内容耗时超过 timeout 之后,Suspense 将会切换为展示 #fallback后备内容。若 timeout 值为 0 将导致在替换#default 默认内容时立即显示 #fallback后备内容。
Suspense 事件
Suspense 组件会触发三个事件:pending、resolve 和 fallback。pending 事件是在进入挂起状态时触发。resolve 事件是在 default 插槽完成获取新内容时触发。fallback 事件则是在 fallback 插槽的内容显示时触发。
异步组件的suspensible特性
异步组件默认就是“suspensible”的。这意味着如果组件关系链上有一个 Suspense,那么这个异步组件就会被当作这个 Suspense的一个异步依赖。在这种情况下,加载状态是由 Suspense 控制,而该组件自己的加载、报错、延时和超时等选项都将被忽略。
异步组件也可以通过在选项中指定 suspensible: false 表明不用 Suspense 控制,并让组件始终自己控制其加载状态。
异步组件和Suspense配合使用的示例代码
<template> <Suspense> <template #default> <AsyncComponent /> </template> <template #fallback> <p>loading...</p> </template> </Suspense> </template>
到此这篇关于Vue3: Suspense异步加载组件的文章就介绍到这了,更多相关Vue3 Suspense异步加载组件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!