component is属性动态加载切换组件时会重新加载的问题

我们在用VUE项目进行开发，进行动态组件切换时，经常会使用component is属性，但有些时候为了用户体验和性能考虑，切换时不想组件重新加载，但是is属性切换时是会重新加载，那怎么解决呢？

1.有的时候，在不同组件之间进行动态切换，有两种方法一种使用v-if 或者v-show
来控制组件之间的显示切换
2.另外一种配合component标签和v-bind 搭配is使用例如：
    <component v-bind:is="切换组件的名"></component>
3.简单的说:
    <component> 元素，动态地绑定多个组件到它的 is 属性
    <keep-alive> 保留状态，避免重新渲染

1.component 每次只能显示一个组件，组件之间切换的时候就是销毁之前的组件
，重建新的组件这样会浪费性能
2.想查看上面话中具体的代码效果，可以在组件中加入声明周期钩子，断点来看
3.详解解决这类问题使用<keep-alive></keep-alive> 来解决例如下面案例可以写成：
<keep-alive>
    <component :is="tab"></component>
</keep-alive> 
4.只要切换到 A 组件，mounted 就会触发一次，切换到其它组件，
beforeDestroy 也会触发一次，说明组件再重新渲染，这样有可能导致性能
问题。为了避免组件的重复渲染，可以在 <component> 外层套一个 Vue.js
内置的 <keep-alive> 组件，这样，组件就会被缓存起来
5.这时，只有 mounted 触发了，如果不离开当前页面，切换到其它组件，
beforeDestroy 不会被触发，说明组件已经被缓存了。