异步组件

以下是对变化的总体概述：

• 新的 defineAsyncComponent 助手方法，用于显式地定义异步组件
• 如果是一个带选项的复杂的异步组件，component 选项重命名为  loader
• Loader 函数本身不再接收 resolve 和 reject 参数，且必须返回一个 Promise

在vue2中使用路由的时候，如果要减少程序的体积就要做异步路由的设定，我们使用的是import 这样的函数，该函数中把import的返回值作为一个函数的返回值直接返回

vue2中异步组件创建

const asyncModal = () => import('./Modal.vue')

或者，对于带有选项的更高阶的组件语法：　

const asyncModal = {
  component: () => import('./Modal.vue'),
  delay: 200,
  timeout: 3000,
  error: ErrorComponent,
  loading: LoadingComponent
}

在vue3中就有不同，要设置一个函数，这个函数要设置在defineAsyncComponent中

为了要和函数式组件区分开，不能声明两个都是函数，所以为了区分是异步组件还是函数式组件，就有了defineAsyncComponent函数

vue3中定义异步组件

 不带配置的异步组件

 app.vue

<template>
   <div>
   app
   <async></async>
   </div>
</template>

<script>
import {defineAsyncComponent} from "vue"
//不带配置的异步组件
export default{
   components:{
      //AsyncCom指定要加载的组件的名称，把defineAsyncComponent放进去尽可以定义一个异步组件了
      async:defineAsyncComponent(()=>import("./components/next.vue"))
   }
}
</script>

 

 带配置项的异步组件，component改为loader

const AsyncComWithOptions=defineAsyncComponent({
  // 这里之前是compoent改为loader
  loader:()=>import ('./components/Nextpage')，
  delay:20,
  timeout:3000,
  error:ErrorCompoent,
  loading:LoadingComponent
})

与vue2不同的是，loader函数不再接收resolve和reject参数，且必须始终返回promise

 此时loader里面也可以这样写

 loader:()=>new Pomise((resolve,reject)=>{
    resolve({
      template:'<div>我是异步组件</div>'
    })
  }),