动态组件is和keep-alive

1. 动态组件使用场景：

标签页切换时，显示不同的组件。可以使用<component :is=”dyCom”>

父组件中：

template中： <component :is=”dyCom”>

data(){

return{

dyCom:” // 动态组件

}}

components： {‘son1’: () => import(‘./son1’), ‘son2’: () => import(‘./son2’)}

tab切换出发方法:

handleTab(v){

this.dyCom = v;

}

2. 动态组件使用的问题

每次切换时，都会涉及组件的销毁和重建。性能浪费。

3. 使用keep-alive缓存

使用：<keep-alive><component :is=”dyCom”></keep-alive>

生命周期（新增）： actived（激活时调用）和deactived（组件离开时调用）。

优点：使用后，首次加载组件时，会缓存组件实例对象。组件切换时，不会重新构建虚拟dom，直接从内存取缓存。

参数设置:include 和 exclude设置需要缓存的组件。