Vue3中的Suspense

在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>
  );
}