KeepAlive浅理解

什么是KeepAlive

KeepAlive:当它包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。是vue中的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染Dom

KeepAlive用法

提供两个生命周期（activated，deactivated），包裹缓存对应组件。

KeepAlive作用

作用：在组件切换过程中将状态保留在内存中，防止重复渲染DOM，减少加载时间及性能消耗，提高用户体验性。

原理

会将包裹的组件实例放入vue的cache属性上。 include定义缓存白名单，keep-alive会缓存命中的组件；exclude定义缓存黑名单，被命中的组件将不会被缓存；max定义缓存组件上限，超出上限使用LRU的策略置换缓存数据。生命周期1.activated：页面第一次进入的时候，钩子触发的顺序是created->mounted->activated2.deactivated ：页面退出的时候会触发deactivated，当再次前进或者后退的时候只触发activated

KeepAlive属性

include: - 字符串或正则表达式。只有名称匹配的组件会被缓存 exclude: - 字符串或正则表达式。任何名称匹配的组件都不会被缓存 max :- 数字。最多可以缓存多少组件实例

用法

<keep-alive :include="whiteList" :exclude="blackList" :max="amount">
     <component :is="currentComponent"></component>
</keep-alive>

<keep-alive :include="whiteList" :exclude="blackList" :max="amount">
    <router-view></router-view>
</keep-alive>