vue动态组件（组件切换操作）

vue动态组件

有时，我们需要在多个不同的组件之间进行切换操作。
组件的切换方式

• (1)使用v-if
  使用v-if 来处理，适用频繁操作的场景。
  会不断地创建组件和销毁组件,影响性能;
  不会保留组件改变后的状态及修改后的数据

  <InBox v-if="currentCom==='InBox'"></InBox>
  <PostMail v-if="currentCom==='PostMail'"></PostMail>
  <RecycleBin v-if="currentCom==='RecycleBin'"></RecycleBin>

• (2)使用v-show ，
  v-show 改变的只有该元素的display样式
  根据表达式的值（布尔值），切换元素的显示与隐藏（display 属性）
  显示与隐藏，dom树的结构未变

<InBox v-show="currentCom==='InBox'"></InBox>
<PostMail v-show="currentCom==='PostMail'"></PostMail>
<RecycleBin v-show="currentCom==='RecycleBin'"></RecycleBin>

• (3)动态组件
  vue提供的更方便的方式去完成组件之间的切换----动态组件
既改变了dom树结构，又没有销毁元素

component组件
它是vue 内置的一个组件，它提供一个 is 属性用来动态渲染不同的组件

keep-alive 组件
当在这些组件之间切换的时候，如果要保持这些组件的状态，以避免反复重渲染导致的性能问题，vue内置组件keep-alive帮我们解决了这个问题。使用 keep-alive 以后，内部包含的组件将增加 激活 和 失活/冻结 的状态 (类似于演员在舞台表演，叫谁的名字谁上来表演，没叫到的就在后台等待,第一个演员表演完，后面的上来接着演，而表演过的演员没有走，还在舞台后面，后续如果叫到他们，他们再上台)

 <keep-alive>
    <component :is="currentCom"></component>
    <!--<component :is="isVisible"></component>-->
 </keep-alive>

生命周期
使用了 keep-alive的组件会触发两个生命周期函数:
activated()：keep-alive组件激活时调用(组件激活后需要它做什么)
deactivated()：keep-alive组件停用时调用(同理，组件停用后需要它做什么)

看一个示例如下:
App.vue

<template>
  <div id="app">
    <