1.动态组件
让多个组件使用同一个挂载点，并动态切换，这就是动态组件
简单的说，动态组件就是将几个组件放在一个挂载点下，这个挂载点就是标签，其需要绑定is属性，属性值为父组件中的变量，变量对应的值为要挂载的组件的组件名，然后根据父组件里某个变量来动态显示哪个，也可以都不显示.
那么vue3在<script setup>语法糖中如何使用动态组件呢?
针对这个问题，其实 vue官方已经给出了说明。由于组件被引用为变量而不是作为字符串键来注册的，在 <script setup> 中要使用动态组件的时候，就应该使用动态的 :is 来绑定：
<template>
<div>
<component :is="HotCome"></component>
</div>
</template>
<script setup>
import HotCome from "./Hot"
import NewCome from "./New"
</script>除了直接绑定组件的名字之前还可以使用变量切换组件
<template>
<div>
<p><button @click="current=HotCome">最热插件组件</button> |
<button @click="current=NewCome">最新插件组件</button> </p>
<!-- <component :is="HotCome"></component> -->
<component :is="current"></component>
</div>
</template>
<script setup>
import {reactive,markRaw,ref} from "vue"
import HotCome from "./Hot"
import NewCome from "./New"
const Hot=markRaw(HotCome);
const New=markRaw(NewCome);
const current=ref(Hot);
</script>2.缓存<keep-alive>
官网解释： 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 相似， 是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在父组件链中。 当组件在 内被切换，它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。 在 2.2.0 及其更高版本中，activated 和 deactivated 将会在 树内的所有嵌套组件中触发。 主要用于保留组件状态或避免重新渲染
包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 相似， 是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在父组件链中
可以将动态组件放到组件内对动态组件进行缓存，这样动态组件进行切换的时候，就不会每次都重新创建了。
初次进入时：created > mounted > activated；退出后触发 deactivated
再次进入：会触发 activated；事件挂载的方法等，只执行一次的放在 mounted 中；组件每次进去执行的方法放在 activated 中
<keep-alive>
<component :is="current"></component>
</keep-alive>在vue的项目中，遇到这样的问题。当使用了keep-alive缓存动态组件以后，每次切换进入页面或者组件的时候会被缓存下来。如果进入一个页面后，使用mounted进行数据请求以后，会被缓存下来。在下一次进入页面，就不会再重新发起数据请求，直接从缓存中读取数据，就不能拿到最新的数据，对页面进行重新渲染了。这个也并不是我们所想要出现的。
在keep-alive中，有两个生命周期钩子函数，分别是activated()和deactivated()。我们可以使用activated()，在组件激活的时候会被调用，每次进入页面的时候，都会执行，在这个里面进行数据的请求，用来替代mounted。所以，只要将mounted替换为activated就可以解决问题了。
<script setup>
import { onMounted,onActivated } from 'vue';
onMounted(()=>{
console.log("hot触发了生命周期")
})
onActivated(()=>{
console.log("Hot组件进入的时候触发")
})
</script>