携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第20天，点击查看活动详情
动态组件是指不同组件之间进行动态切换。在 Vue 中可以通过一个特殊的 attribute：is 来实现
Vue中特殊的attribute
Vue3中有三种特殊的attribute（属性），具体如下：
- key
- ref ：用于注册模板引用
- is ：用于绑定动态组件
注：Vue3中废弃了Vue2中的slot、slot-scope等特殊属性
内置属性 is
当有多个组件需要进行切换时，可能会想到使用 v-if 或者 v-show 来控制组件的显隐。 Vue 还为我们提供了另外一种实现方式：is 属性。
1. 使用场景：
不同组件之间进行动态切换，比如：点击不同的Tab页，界面切换显示相应的组件
2. 用法：
<component :is="currentComponent"></component>
data: {
currentComponent: 'HOME1'
},
components: {
HOME1: {
template: `<h1>HOME1</h1>`
},
HOME2: {
template: `<h1>HOME2</h1>`
}
}
currentComponent ：已注册组件的名字或一个组件的选项对象
3. 优化：
is 属性需要结合 <component> 组件一起使用，component 每次只能显示一个组件，组件之间切换的时候会销毁之前的组件，重新建立新的组件。所以可能会导致性能问题。
优化方法：<keep-alive>
在前面 Vue进阶 | 关于 keep-alive 中有介绍过<keep-alive>的特点:
<keep-alive>是 Vue 中的内置组件。它可以使组件维持当前状态，不重新进行初始化，减少加载时间及性能消耗，自身不会渲染成一个 DOM 元素，也不会出现在父组件链中。使用它的目的是将组件缓存起来，不会进行销毁，也避免了组件的重复渲染，即“失活的组件将会被缓存”。
当组件被缓存时，或是当组件被激活时，会自动触发组件的生命周期钩子：
- 当组件被缓存时，会自动触发
deactivated。 - 当组件被激活时，会自动触发
activated。
代码实现：
<keep-alive>
<component :is="currentComponent"></component>
</keep-alive>
