Vue动态/异步组件

下面，我们来系统的梳理关于 Vue 动态组件 & 异步组件 的基本知识点：

---

一、动态组件核心概念

1.1 什么是动态组件？

动态组件是 Vue 中一种在运行时动态切换不同组件的机制。通过 <component :is="..."> 语法，开发者可以根据应用状态动态决定渲染哪个组件，实现灵活的内容切换。

1.2 核心语法解析

<component :is="currentComponent"></component>

• currentComponent：可以是已注册的组件名，也可以是组件选项对象
• 动态绑定 :is 属性决定当前渲染的组件

1.3 工作原理

Vue 在运行时根据 is 的值决定渲染哪个组件：

1. 卸载当前组件实例
2. 初始化新组件实例
3. 触发相应的生命周期钩子

二、动态组件基础用法

2.1 基本组件切换

<template>
  <div>
    <button @click="current = 'Home'">首页</button>
    <button @click="current = 'About'">关于</button>
    
    <component :is="current"></component>
  </div>
</template>

<script>
import Home from './Home.vue'
import About from './About.vue'

export default {
  components: { Home, About },
  data() {
    return {
      current: 'Home'
    }
  }
}
</script>

2.2 动态组件类型

类型	示例	特点
组件名（字符串）	:is="'Home'"	需全局/局部注册
组件选项对象	:is="HomeComponent"	直接引用组件对象
动态组件名	:is="dynamicComponentName"	根据逻辑动态确定组件

三、组件切换行为控制

3.1 保持组件状态

默认情况下切换动态组件时，组件的状态不会保留。使用 <keep-alive> 包裹可缓存组件实例：

<keep-alive>
  <component :is="currentComponent"></component>
</keep-alive>

3.2 keep-alive 生命周期

• activated：组件被激活时触发
• deactivated：组件被停用时触发

3.3 缓存策略配置

<keep-alive :include="['Home', 'About']" :exclude="['Admin']" :max="5">
  <component :is="currentComponent"></component>
</keep-alive>

• include：匹配组件名/组件实例缓存
• exclude：排除不缓存的组件
• max：最大缓存组件数（LRU策略）

四、动态组件高级模式

4.1 动态组件工厂模式

export default {
   
  data() {
   
    return {
   
      componentMap: {
   
        home: HomeComponent,
        about: AboutComponent

原文地址：https://blog.csdn.net/weixin_46247794/article/details/148531932

免责声明：本站文章内容转载自网络资源，如侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！