[TOC]

解决白屏问题

异步组件

在大型应用中，我们可能需要将应用分割成小一些的代码块 并且减少主包的体积，这时候就可以使用异步组件

父组件

父组件引用子组件 通过defineAsyncComponent加载异步配合import 函数模式便可以分包

<template>
  <div class="content">
    <Suspense>
      <template #default>
        <A></A>
      </template>
      <template #fallback> loading... </template>
    </Suspense>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref, markRaw, toRaw, defineAsyncComponent } from "vue";

const A = defineAsyncComponent(() => import("../../components/A/index.vue"));
</script>

<style lang="less" scope>
.content {
  padding: 20px;
  flex: 1;
  margin: 20px;
  overflow: auto;
  border: 1px solid #ccc;
}
</style>

server.ts

type NameList = {
  name: string;
};

export const axios = (url: string): Promise<NameList[]> => {
  return new Promise((resolve) => {
    let xhr: XMLHttpRequest = new XMLHttpRequest();

    xhr.open("GET", url);
    xhr.onreadystatechange = () => {
      if (xhr.readyState === 4 && xhr.status === 200) {
        setTimeout(() => {
          resolve(JSON.parse(xhr.responseText));
        }, 2000);
      }
    };

    xhr.send();
  });
};

子组件-顶层 await

在setup语法糖里面 使用方法