这节课我们来学习异步组件，我们之前学的全局组件和局部组件其实都属于同步组件，那么今天我们学习的内容异步组件，他和我们和同步组件又什么区别呢。我们今天一起来看一下。

同步组件写法

我们先来回顾一下同步组件的写法。

const app = Vue.createApp({
    data() {
      return {
        message: "hello world!"
      }
    },
    template: `<div><tongBuComponent/></div>`
  })

  app.component("tongBuComponent",{
    template:`<div>hello vue</div>`
  })
  const vm = app.mount("#app")

这样就是一个同步组件的写法。同步组件就是一定能我们定义号了，就可以直接使用。

异步组件

异步组件就是在调用组件时他不会直接立即渲染组件，它需要等待一些业务逻辑执行完之后才会执行组件渲染到页面上。我们先来看一下异步组件怎么来实现，看一下它的执行效果。

app.component('async-component',Vue.defineAsyncComponent(()=>{
    return new Promise((resolve,reject)=>{
        setTimeout(()=>{
            resolve({
                template:`<div>这是一个异步组件</div>`
            })
        },3000)
    })

}))

在代码中我使用了Promise和setTimeout延迟执行来模拟来一个异步执行，我们运行来看一下效果。我们会发现组件需要等待三秒才渲染出来，这三秒就是在模拟执行异步逻辑的时间， 等待逻辑执行完成之后使用resolve返回了一个组件。

在大型项目中，我们可能需要拆分应用为更小的块，并仅在需要时再从服务器加载相关组件这节课我使用到了Promise 这是es6中的语法，主要用于处理异步回掉问题， 大家不熟悉的话可以去了解一下，另外在我们日常工作中一般还是使用同步组件较多，异步组件使用比较少，大家只需要先了解一下异步组件的写法，知道有异步组件的这个东西就行了，今后遇到了再研究。