Vue3 内置组件Suspense

什么是Suspense

Suspense组件可以等待某个异步组件解析完成的前后的显示情况

比如一个组件是图片,它里面是图片资源是网络请求过来的,我们就能使用Suspense 展示在这个请求未完成的情况下展示的另外一种样式。

使用方式

这个组件有两个具名插槽

default - 默认的插槽。可以放置异步的组件

fallback - 可以放置组件未加载前的样式 比如 loading

例子

AsyncComponent.vue 这是一个异步的组件



SuspenseLearn.vue 这是学习Suspense的页面



效果

上述就会在异步组件未加载完毕前,展示 Loading... 的效果

参考

vue3-doc-async-components

你可能感兴趣的:(Vue3 内置组件Suspense)