<Suepense></Suepense>
vue3 中新增的内置组件,用于处理异步组件加载的状态,使页面视觉可以更加平滑的过渡,用于异步组件异步数据的获取与处理,并提供一种新的组件加载状态,直到组件解析加载完成;
作用:
异步组件加载:当使用异步组件时,允许你定义一个loading
状态,直到该组件可用。
数据异步获取:对于需要异步获取数据的组件,Suspense
可以等待数据加载完成之后,再进行组件的渲染。
进行代码分割:配合 Vue 3
的异步组件和 Webpack
的代码分割功能,Suspense
可以实现更加高效的代码加载,减少初始加载时间。
用户体验更好:通过定义组件的加载状态和错误处理,Suspense
提供了更平滑的解决方案,使UI加载更加流畅,有助于用户体验的提升,避免了加载过程中的空白或闪烁问题。
应用场景
懒加载组件:在应用中使用懒加载技术时,Suspense
可以提供一个加载中状态,告诉用户内容正在加载中。
组件异步渲染:对于依赖于异步数据的组件,可以使用 Suspense
包裹这些组件,直到所有需要的数据加载完成后再渲染。
路由懒加载:在 Vue
路由配置中,可以结合 Suspense
使用,实现路由级别的懒加载,优化应用的启动速度。
动态导入(Code Splitting):当使用动态 import()
语法导入组件时,Suspense
可以处理组件加载过程中的各种状态,提升应用性能。
<Suspense></Suspense>
组件主要有两个插槽:#default 和 #fallback
。两个插槽都只允许一个直接子节点。在可能的时候都将显示默认槽中的节点。否则将显示后备槽中的节点。
<template>
<div class="my-suspense">
<!-- 如果 suspense 组件外部有父组件,则在 suspense 组件 default插槽中可以渲染其他具名插槽内容,切记只能有一个子节点,否则无法渲染 -->
<Suspense>
<template #default>
<!-- 不管是否写 #default 插槽,默认都是渲染到default 插槽中 -->
<div class="my-suspense-default">
<!-- 只能在此处 渲染默认插槽的内容, -->
<!-- <slot name="header">增加一个header具名插槽</slot> -->
<!-- 这里还可以动态渲染其他组件 -->
</div>
</template>
<template #fallback>
<!-- fallback插槽 用来显示 数据 或组件加载中状态 -->
<span>Loading...</span>
</template>
</Suspense>
</div>
</template>
suspense
组件 最开始是先渲染的默认插槽中的内容,而在默认插槽渲染的进程中,如果遇见异步加载的组件或数据,则会渲染fallback
插槽中的内容;等异步数据加载完成之后,fallback
插槽中的 加载中 数据会自动消失,进而渲染为默认插槽中的数据;
注意:<Suepense></Suepense>
目前处于实验性阶段,切勿用在生产环境中,具体请查看vue3官网: