Vue中的keepalive

Posted 2023-03-05 曾胖神父

Vue中的keepalive

概念

Vue系统自带的一个组件，功能：缓存组件，防止重复渲染DOM，以此减少加载时间提升性能消耗。

原理

在created函数调用时将需要缓存的虚拟DOM节点保存在this.cache中/在render(页面渲染)时，如果虚拟DOM的name符合缓存条件(可以用include以及exclude控制)；则会从this.cache中取出之前缓存的虚拟DOM实例进行渲染。

作用

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

使用场景

在开发中经常有从列表跳到详情页，然后返回详情页的时候需要缓存列表页的原来数据以及滚动位置，这个时候就需要保存状态，要缓存状态。

Props组件属性

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

生命周期函数

而keepalive缓存的组件，会多出两个生命周期钩子函数：activated与deactivated。
activated生命周期函数调用时机：是第一次进入缓存路由/组件，在mounted之后，beforeRouteEnter守卫传给next的回调函数之前调用，简单点说就是keepalive缓存的组件激活时调用
deactivated生命周期函数调用时机：组件被停用(离开路由)时调用