vue中keep-alive的理解

概念

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

作用

在组件切换过程中将状态保留在内存中，也就是将不活动的组件的内容进行一个缓存，当组件再次被使用时，之前的内容数据不会消失。防止重复渲染DOM，减少加载时间及性能消耗，提高用户体验性

属性

属性名	属性值	说明
include	字符串或者正则表达式	只有与属性值匹配的组件才会被缓存
exclude	字符串或者正则表达式	除了与属性值匹配的之外的组件才会被缓存，与属性值匹配的组件不会被缓存
max	数字	最多可以缓存多少个组件实例

生命周期函数

• actived

在keep-alive组件被使用时触发actived函数

进入页面获取最新数据时可以在该函数阶段获取数据，相当于created函数的作用

• deactived

在keep-alive组件被停用，切换到其他组件时触发deactived函数

案例

• 1、先创建几个切换的路由，将视图用keep-alive组件报包裹起来

keep-alive1.png

• 2、将每个组件取名

keep-alive2.png

• 3、keep-alive组件不填属性时，表示所有的组件里的数据都会被缓存

keep-alive3.png

• 4、keep-alive组件使用include属性时，表示只有当组件名称为login的组件的数据才会被缓存，其他组件的数据不会被缓存

keep-alive4.png

• 5、keep-alive组件使用exclude属性时，表示只有当组件名称为login的组件的数据不会被缓存，其他组件的数据才会被缓存

keep-alive5.png

• 6、keep-alive组件使用max属性时，最大可以缓存的组件数量

keep-alive6.png