在vue3中新加了一个组件叫<Suspense></Suspense>,其作用是当你在进行一个异步加载时，可以先提供一些静态组件作为显示内容，然后当异步加载完毕时再显示.
这是一个内置标签,不用引入直接使用就ok
<Suspense>
<template #default>
<AsyncComponent/>
</template>
<template #fallback>
<h1>Loading</h1>
</template>
</Suspense>
根据插槽机制,来区分组件,#default插槽里面的内容就是你需要渲染的异步组件;#fallback就是你指定的加载中的静态组件。
需要注意的是:<AsyncComponent/>组件需要返回一个Promise
<script lang="ts">
import {defineComponent} from 'vue'
export default defineComponent({
name:"AsyncComponent",
setup() {
return new Promise((resolve,reject)=> {
setTimeout(()=> {
resolve({result:"yuanxi"})
},2000)
})
}
})
</script>
总结
这种机制,在React中早已存在了,React.lazy和<Suspense></Suspense>组件也是实现类似的效果,只不过是语法不一样而已. import()函数会返回一个Promise
React.lazy 接受一个函数，这个函数需要动态调用 import()。它必须返回一个 Promise，该 Promise 需要 resolve 一个 default export 的 React 组件。
然后应在 Suspense 组件中渲染 lazy 组件，如此使得我们可以使用在等待加载 lazy 组件时做优雅降级（如 loading 指示器等）。
import React, { Suspense } from 'react';
const OtherComponent = React.lazy(() => import('./OtherComponent'));
function MyComponent() {
return (
<div>
<Suspense fallback={<div>Loading...</div>}>
<OtherComponent />
</Suspense>
</div>
);
}
