动态组件component
<component>动态组件是一种可以根据数据变化而动态加载不同组件的方式。使用动态组件可以有效地减少代码复杂度，提高组件的复用性和灵活性。
动态组件通过一个特殊的属性is来实现动态加载，is的值可以是组件的名称或组件对象。
应用场景示： 比如要定义三个页面，分布是Home.vue,Products.vue和Contact.vue,分别对应首页、产品和个人中心，再定义一个Tabbar.vue，Tabbar.vue上面有三个菜单，分布是首页、产品和个人中心，要求点击Tabbar上对应的菜单，页面切换到对应的页面，这里我们就可以使用动态组件来动态切换页面
代码如下： App.vue中的代码
代码语言：javascript复制<template>
<Tabbar></Tabbar>
<component :is="tabs[active]"></component>
</template>
<script setup>
import Tabbar from './components/Tabbar.vue';
import Home from './components/Home.vue';
import Products from './components/Products.vue';
import Contact from './components/Contact.vue';
import { onMounted,reactive,ref } from 'vue';
import store from './store'
const active = ref('Home')
const tabs = {
Home,
Products,
Contact
}
onMounted(() => {
// 订阅
store.subscribe((value)=>{
active.value = value
})
})
</script>
<style scoped>
</style>Tabbar.vue中的代码
代码语言：javascript复制<template>
<div>
<ul>
<li v-for="item in menuList" :key="item.key" @click="handleClick(item.key)">{{ item.name }}</li>
<!-- <li @click="handleClick('Home')">首页</li>
<li @click="handleClick('Products')">产品</li>
<li @click="handleClick('Contact')">个人中心</li> -->
</ul>
</div>
</template>
<script setup>
import store from '../store'
import Home from './Home.vue';
const menuList = [
{
key:'Home',
name:'首页'
},
{
key:'Products',
name:'产品'
},
{
key:'Contact',
name:'个人中心'
},
]
function handleClick(value) {
// console.log(value);
store.publish(value)
}
</script>
<style scoped>
ul {
position: fixed;
bottom: 10px;
height: 50px;
line-height: 50px;
width: 100%;
display: flex;
justify-content: space-around;
list-style: none;
}
</style>这里用到了JavaScript中的订阅发布机制 在src目录下新建store.js文件,代码如下
代码语言：javascript复制export default {
datalist:[],
//订阅函数
subscribe(cb) {
this.datalist.push(cb)
},
//发布函数
publish(value){
this.datalist.forEach(cb=>cb(value))
}
}然后在App.vue中引入store.js，在onMounted函数中调用订阅函数subscribe，在Tabbar.vue中引入store.js，在点击事件中调用发布函数，publish
默认情况下，一个动态组件实例在被替换掉后会被销毁。这会导致它丢失其中所有已变化的状态——当这个组件再一次被显示时，会创建一个只带有初始状态的新实例。如果我们需要实现切换组件时不被销毁，我们就需要配合vue为我们提供的内置组件KeepAlive
KeepAlive
KeepAlive是一个内置组件，它的功能是在多个组件间动态切换时缓存被移除的组件实例。用于缓存动态组件实例并避免多次渲染的内置组件。通过使用 KeepAlive 组件包裹动态组件，可以实现组件的缓存、复用、提高组件性能等功能。
KeepAlive 的使用方式非常简单，只需要将动态组件包裹在 KeepAlive 标签中就可以了
代码语言：javascript复制 <KeepAlive>
<component :is="tabs[active]"></component>
</KeepAlive>KeepAlive的 include 和 exclude
KeepAlive默认会缓存KeepAlive内部的所有组件实例，比如上面的示例，默认情况下，KeepAlive会缓存Home、Products和Contact组件，如果我们希望值缓存Home和Products组件的内容，不想缓存Contact组件的内容，这时，我们就可以使用
include 或 exclude 属性来实现
include 和 exclude的值可以是字符串、正则表达式、函数等类型，分别表示需要缓存的组件和不需要缓存的组件：
-
include：该属性用于匹配需要缓存的组件，可以是一个字符串表示名称，也可以是一个正则表达式，或一个函数，传入组件对象，返回一个布尔值。只有匹配到的组件才会被缓存。 -
exclude：该属性用于匹配不需要缓存的组件，可以是一个字符串表示名称，也可以是一个正则表达式，或一个函数，传入组件对象，返回一个布尔值。被匹配到的组件将不会被缓存。
include 缓存Home和Products组件的示例代码
代码语言：javascript复制 // 字符串形式
<KeepAlive include="Home,Products">
<component :is="tabs[active]"></component>
</KeepAlive>
//正则表达式 (需使用 v-bind)
<KeepAlive :include="/Home|Products/">
<component :is="tabs[active]"></component>
</KeepAlive>
//数组形式 (需使用 v-bind)
<KeepAlive :include="['Home','Products']/">
<component :is="tabs[active]"></component>
</KeepAlive>exclude缓存不包含Home和Products组件的示例代码
代码语言：javascript复制 // 字符串形式
<KeepAlive exclude="Home,Products">
<component :is="tabs[active]"></component>
</KeepAlive>
//正则表达式 (需使用 v-bind)
<KeepAlive :exclude="/Home|Products/">
<component :is="tabs[active]"></component>
</KeepAlive>
//数组形式 (需使用 v-bind)
<KeepAlive :exclude="['Home','Products']/">
<component :is="tabs[active]"></component>
</KeepAlive>关于vue中的动态组件和KeepAlive组件的用法就介绍到这里，喜欢的小伙伴点赞关注加收藏哦！
