一,前言
1.在vue
中我们可以使用component
内置组件根据is
属性来切换组,keepalive
的功能就是在多个组件间动态切换时缓存被移除的组件实例,
2.keepalive
也是vue
的一个内置组件
二,keepalive
使用
1.默认情况下,一个组件实例在被替换掉后会被销毁,这会导致它丢失其中所有已变化的状态,可以使用keepalive
组件使被移除的组件不被销毁,而是处于失活状态
<KeepAlive>
<component :is="activeComponent" />
</KeepAlive>
2.我们可以通过include
和exclude
属性来定制某个组件是否开启默认缓存
(1)字符串形式,内容为组件名,多个组件用,
分割
<KeepAlive include='a,b'>
<component :is="activeComponent" />
</KeepAlive>
(2)数组形式
<KeepAlive :include="['a','b']">
<component :is="activeComponent" />
</KeepAlive>
(3)正则形式
<KeepAlive :include="/a|b/">
<component :is="activeComponent" />
</KeepAlive>
3.我们可以通过max
属性来限制可被缓存的最大组件实例数,超过最大属性时,最久没被访问的实例将会被销毁
<KeepAlive :max="6">
<component :is="activeComponent" />
</KeepAlive>
三,缓存组件的生命周期
1.一个被缓存的组件在被移除dom
时会执行onDeactivated()
钩子,在被重新插入dom
时执行onActivated()
2.需要注意的是onActivated
和onDeactivated
在挂载和卸载时也会执行