Vue3 - 异步组件（写法及详细示例）

前言

先来说说什么是异步组件，异步呢，是相对于同步而言的。我们日常开发使用到的大多都是同步组件，也就是说在 vue 实例第一次执行渲染的过程中，就已经生成了组件构造器和请求了资源，大白话说就是页面加载时就已经渲染了。

异步组件则只是在 用到 该组件时才去渲染与请求资源，注意关键字，用到！

假设有这么一个需求，当用户点击按钮后，弹出一个模态框。如果这个模态框是异步组件的话，那么只有当点击按钮后模态框显示时才异步请求相应的文件资源进行渲染加载，而你不点击按钮的话，这个模态框永远不会请求资源与渲染加载，节省资源。

其实异步组件呢，可能很多朋友已经在 Vue2 中用过很多次了，让我们来回顾一下代码。

const routes = [
  {
   
    path: '/',
    
1
2
3
4