网站建设公司 六安,wordpress记录主题使用情况,重庆互联网企业,上海市建设工程检测行业协会网站异步组件 代码分包 Suspense内置组件 顶层 await
一、概述
在大型项目中#xff0c;我们可能需要拆分应用为更小的块#xff0c;以减少主包的体积#xff0c;并仅在需要时再从服务器加载相关组件。这时候就可以使用异步组件。
Vue 提供了 defineAsyncC…异步组件 代码分包 Suspense内置组件 顶层 await
一、概述
在大型项目中我们可能需要拆分应用为更小的块以减少主包的体积并仅在需要时再从服务器加载相关组件。这时候就可以使用异步组件。
Vue 提供了 defineAsyncComponent 方法来实现此功能这个方法接收一个返回 Promise 的加载函数。
ES 模块动态导入会返回一个 Promise所以多数情况下我们会将它和 defineAsyncComponent 搭配使用。类似 Vite 和 Webpack 这样的构建工具也支持此语法 (并且会将它们作为打包时的代码分割点)因此我们也可以用它来导入 Vue 单文件组件。
1.1 组件内注册异步组件局部注册
script setupimport { defineAsyncComponent } from vueconst AsyncComp defineAsyncComponent(() import(./components/MyComponent.vue))
/script
templateAsyncComp /
/template得到的 AsyncComp 是一个外层包装过的组件仅在页面需要它渲染时才会调用加载内部实际组件的函数。它会将接收到的 props 和插槽传给内部组件所以你可以使用这个异步的包装组件无缝地替换原始组件同时实现延迟加载。 1.2 全局注册异步组件
与普通组件一样异步组件可以使用 app.component() 全局注册
app.component(MyComponent, defineAsyncComponent(() import(./components/MyComponent.vue)
))二、代码分包 高级选项配置
2.1 代码分包
父组件引用子组件通过 defineAsyncComponent 加载异步配合 import 函数模式便可以分包先执行 npm run build 指令观察异步加载组件打包后 dist 目录文件。
import { defineAsyncComponent } from vue
const Child defineAsyncComponent(() import(../../components/Child/index.vue))然后修改代码为组件同步引入时再执行 npm run build 指令观察打包后 dist目录下文件的变化。
import Child from ../../components/Child/index.vue2.2 高级选项配置
defineAsyncComponent()提供了高级选项处理一些其它的操作如加载状态、错误状态、延迟时间、超时时间等配置
const AsyncComp defineAsyncComponent({// 加载函数loader: () import(./Foo.vue),// 加载异步组件时使用的组件loadingComponent: LoadingComponent,// 展示加载组件前的延迟时间默认为 200msdelay: 200,// 加载失败后展示的组件errorComponent: ErrorComponent,// 如果提供了一个 timeout 时间限制并超时了// 也会显示这里配置的报错组件默认值是Infinitytimeout: 3000
})三、Suspense内置组件了解
异步组件可以搭配内置的 Suspense 组件一起使用
Suspense 是一个内置组件用来在组件树中协调对异步依赖的处理。它让我们可以在组件树上层等待下层的多个嵌套异步依赖项解析完成并可以在等待时渲染一个加载状态。如果在渲染时遇到异步依赖项 (异步组件和具有 async setup()的组件)它将等到所有异步依赖项解析完成时再显示默认插槽。
Suspense 接受两个插槽#default 和 #fallback。它将在内存中渲染默认插槽的同时展示后备插槽内容。
Suspensetemplate #defaultDialogtemplate #defaultdiv我在哪儿/div/template/Dialog/templatetemplate #fallbackdivloading.../div/template
/Suspense# 或Suspense!-- 具有深层异步依赖的组件 --Dashboard /!-- 在 #fallback 插槽中显示 “正在加载中” --template #fallbackLoading.../template
/Suspense四、顶层 await
script setup 中可以使用顶层 await。结果代码会被编译成 async setup()
script setupconst post await fetch(/api/post/1).then((r) r.json())
/scriptasync setup() 必须与 Suspense 内置组件组合使用Suspense 目前还是处于实验阶段的特性会在将来的版本中稳定。
