动态组件和异步组件

一、动态组件

使用场景：tab切换，常配合keep-alive使用
使用关键：内置组件 + is属性

内置组件： <component></component>
is属性：绑定一个变量，其值为组件名称字符串，eg:    
<component :is="com"></component>
<script>
import Left from './LeftComponent.vue'
import Right from './RightComponent.vue'
data(){
    com: 'Left'
}

二、异步组件

使用场景：
1、配合v-if按需加载
import Xxx from '...'，这种引入会直接加载组件代码，即使<Xxx v-if=false>
异步组件的方式，只有在<Xxx v-if=true>的情况下，才加载代码
2、配合Suspense内置组件使用
<template #default>中一定要用异步组件。否则，不会展示#fallback中的内容，等#default中的组件资源加载完成，直接展示#default中的组件

关联注意：
1、对所有的路由使用动态引入，同时最好不要在路由中加异步组件

vue2中全局和局部的异步组件：
// 一个返回promise的函数
Vue.component('xx', () => import('...'))
components: {
    Demo: () => import('...')
}

vue3中全局和局部的异步组件：
// 常搭配Suspense内置组件使用
app.component('xx', defineAsyncComponent(() => import('...')))
<script setup>
const Demo = defineAsyncComponent({
    loader: () => import('...'),
    delay: 200,
    timeout: 3000
})