异步组件(Suspense)

Suspense

业务方向

骨架屏, 过渡窗口,等待中

vue3- Suspense

基于更好的异步组件实现方式

基本思路

   <Suspense>
      <template #default>
        <h3>
          需要异步数据返回的组件
        </h3>
      </template>
      <template #callback>
         <h1>用于显示laoding等待过渡的组件</h1>
      </template>
    </Suspense>

Loading过渡组件内部实现

<template>
  <h1>一个异步小组件</h1>
</template>
<script>
function sleep(timeout) {
  return new Promise(resolve => setTimeout(resolve, timeout));
}
export default {
  name: "AsyncComponent",
  props: {
    timeout: {
      type: Number,
      required: true
    }
  },
  async setup(props) {
    await sleep(props.timeout);
  }
};
</script>

<template>
  <h1>Supense</h1>
  <Suspense>
    <template #default>
      <AsyncComponent :timeout="3000" />
    </template>
    <template #fallback>
      <h1>加载中</h1>
    </template>
  </Suspense>
</template>
<script>
import AsyncComponent from './AsyncComponent.vue'
export default {
  components:{
    AsyncComponent
  }
}
</script>