Vue里面的异步组件 Vue.defineAsyncComponent```js```异步组件不是直接写模板，是组件相

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://unpkg.com/vue@next"></script>
  </head>
  <body>
    <div id="root"></div>
  </body>
  <script>
    // 根组件，里面有同步子组件和异步子组件
    const app = Vue.createApp({
      // 模板,使用子组件
      template: `
<sync-component />
<async-component />

`,
    });
    // 定义同步子组件
    app.component("sync-component", {
      template: `
    <h1>我是同步组件，立即执行</h1>
    `,
    });

    // 定义异步子组件
    app.component(
      "async-component",
      // 异步组件不是直接写模板，是组件相关内容写到Vue.defineAsyncComponent里面去
      // Vue.defintAsyncComponent()里面也是一个函数作为参数，函数里面要return出去
      Vue.defineAsyncComponent(() => {
        // 返回一个 promsie
        return new Promise((resolve, reject) => {
          // promise里面是一个settimeout,4秒之后才执行resolve
          setTimeout(() => {
            // 成功态执行resolve,执行resolve要做的事是，显示这个异步组件的内容
            resolve(
              // 组件都是些在{}里面
              {
                template: `
<h1>我是异步组件，执行到这里，我就显示了</h1>
`,
              }
            );
          }, 4000);
        });
      })
    );
    // 挂载
    const vm = app.mount("#root");
  </script>
</html>