vue动态切换组件component以及keepalive的运用

动态切换组件用 

componentName是组件名称

案例代码:

keep-alive是一个抽象组件：它自身不会渲染一个DOM元素，也不会出现在父组件链中；使用keep-alive包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。

用户在某个列表页面选择筛选条件过滤出一份数据列表，由列表页面进入数据详情页面，再返回该列表页面，我们希望：列表页面可以保留用户的筛选（或选中）状态。
keep-alive就是用来解决这种场景。当然keep-alive不仅仅是能够保存页面/组件的状态这么简单，它还可以避免组件反复创建和渲染，有效提升系统性能。总的来说，keep-alive用于保存组件的渲染状态。

keep-alive用法

• 在动态组件中的应用

在vue-router中的应用

include定义缓存白名单指定哪些需要缓存，keep-alive会缓存命中的组件；exclude定义缓存黑名单指定哪些组件不需要缓存，include和exclude只能用一个 ，被命中的组件将不会被缓存；max定义缓存组件上限，超出上限使用LRU的策略置换缓存数据。注意那两个参数是 是注册名称

 那么这里是include是Left888了 不是left了

案例：

注意组件假如被 keppkeep-alive 包裹了 会执行这两个生命周期 activated，deactivated

这里 left组件会执行  right组件不会执行这两个生命周期

left组件按钮点击数字会自增 到时切换回去 还是自增的数字依然保留 比如数字自增到10  切换回去还是10  而Right切换回去失踪为0 代码如下

Left代码

Right代码

APP.vue父组件