Vue3新特性-异步组件(新增)

这是我参与11月更文挑战的第3天，活动详情查看：2021最后一次更文挑战

记录 && 积累! 之前有几篇文章有作 Vue3学习总结的开始:

• Vue3-Suspense 处理异步请求,
• Vue3-Teleport 改变组件挂载的根节点,
• Vue3-computed & watch,
• Vue3-生命周期 和 setup()函数,
• Vue3-初体验,

本文继续来学习: Vue3 的新特性之 异步组件

Vue3 异步组件:  

在 Vue2.x 中通过函数创建异步组件,

创建一个异步组件在 Vue2.x 中我们使用如下格式,

const Student = () => import('pages/student/list')
const StudentDetail = () => import('pages/student/detail')

就是异步组件是通过将组件定义为返回 Promise 的函数来创建的，如上

通常是在 路由定义中:

Vue Router 支持一个类似的机制来异步加载路由组件，也就是俗称的懒加载。尽管类似，但是这个功能和 Vue 所支持的异步组件是不同的。当用 Vue Router 配置路由组件时，不应该使用 defineAsyncComponent。

// src/router/routes.js
const routes = [
  {
    path: '/',
    name: '首页',
    component: Home,
  },
  {
    path: '/student',
    name: '学生管理',
    component: () => import('pages/student/list');
  },
  {
    path: '/student-detail/:id',
    name: '学生详情',
    component: StudentDetail,
  },
  /// ...
]

在 Vue3.x 中可使用 defineAsyncComponent

在 Vue 3 中，由于函数式组件被定义为纯函数，因此异步组件需要通过将其包裹在新的  defineAsyncComponent  助手方法中来显式地定义：

import { defineAsyncComponent } from 'vue'
import ErrorComponent from './components/ErrorComponent.vue'
import LoadingComponent from './components/LoadingComponent.vue'

/// 不带选项的异步组件
const asyncModalStudent = defineAsyncComponent(() => import('pages/student/list'))

/// 带选项的异步组件
const asyncModalStudentDetailWithOptions = defineAsyncComponent({
  loader: () => import('pages/student/detail'),
  delay: 200,
  timeout: 3000,
  errorComponent: ErrorComponent,
  loadingComponent: LoadingComponent,
})

参考

• Vue3.x - 异步组件-新增: v3.cn.vuejs.org/guide/migra…
• Vue Router 中的异步异步加载路由组件，俗称的懒加载