什么是 keep-alive
在平常开发中,有部分组件没有必要多次初始化,这时,我们需要将组件进行持久化,使组件的状态维持不变,在下一次展示时,也不会进行重新初始化组件。
也就是说,keepalive
是 Vue
内置的一个组件,可以使被包含的组件保留状态,或避免重新渲染 。也就是所谓的组件缓存
<keep-alive>
是Vue的内置组件,能在组件切换过程中将状态保留在内存中,防止重复渲染DOM。
<keep-alive>
包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。和<transition>
相似,<keep-alive>
是一个抽象组件:它自身不会渲染一个DOM
元素,也不会出现在父组件链中。
prop:
- include: 字符串或正则表达式。只有匹配的组件会被缓存。
- exclude: 字符串或正则表达式。任何匹配的组件都不会被缓存。
keep-alive
的声明周期执行
- 页面第一次进入,钩子的触发顺序
created-> mounted-> activated
,
退出时触发deactivated
当再次进入(前进或者后退)时,只触发activated
- 事件挂载的方法等,只执行一次的放在
mounted
中;组件每次进去执行的方法放在activated
中;
基本用法
<!--被keepalive包含的组件会被缓存-->
<keep-alive>
<component><component />
</keep-alive>
被keepalive
包含的组件不会被再次初始化,也就意味着不会重走生命周期函数
但是有时候是希望我们缓存的组件可以能够再次进行渲染,这时 Vue
为我们解决了这个问题
被包含在 keep-alive
中创建的组件,会多出两个生命周期的钩子: activated
与 deactivated
:
activated
当keepalive
包含的组件再次渲染的时候触发deactivated
当keepalive
包含的组件销毁的时候触发
keepalive
是一个抽象的组件,缓存的组件不会被 mounted
,为此提供activated
和deactivated
钩子函数
更多面试题: 前端vue面试题详细解答
参数理解
keepalive
可以接收3个属性做为参数进行匹配对应的组件进行缓存:
-
include
包含的组件(可以为字符串,数组,以及正则表达式,只有匹配的组件会被缓存) -
exclude
排除的组件(以为字符串,数组,以及正则表达式,任何匹配的组件都不会被缓存) -
max
缓存组件的最大值(类型为字符或者数字,可以控制缓存组件的个数)
注:当使用正则表达式或者数组时,一定要使用 v-bind
<!-- 将(只)缓存组件name为a或者b的组件, 结合动态组件使用 -->
<keep-alive include="a,b">
<component></component>
</keep-alive>
<!-- 组件name为c的组件不缓存(可以保留它的状态或避免重新渲染) -->
<keep-alive exclude="c">
<component