keep-alive
<keep-alive>
是 Vue 内置的一个组件,可以使被包含的组件保留状态,或避免重新渲染。
<keep-alive>
生命周期钩子函数:activated
、deactivated
- 使用会将数据保留在内存中,如果要在每次进入页面的时候获取最新的数据,需要在
activated
阶段获取数据,承担原来 created
钩子中获取数据的任务。
- 被包含在 中创建的组件,会多出两个生命周期的钩子:
activated
与 deactivated
activated
:在组件被激活时调用,在组件第一次渲染时也会被调用,之后每次 <keep-alive>
激活时被调用。
deactivated
:在组件被停用时调用。
- 注意:只有组件被
<keep-alive>
包裹时,这两个生命周期才会被调用,如果作为正常组件使用,是不会被调用,以及在 2.1.0 版本之后,使用 exclude
排除之后,就算被包裹在 <keep-alive>
中,这两个钩子依然不会被调用!另外在服务端渲染时此钩子也不会被调用的。
- 什么时候获取数据?
- 当引入
<keep-alive>
的时候,页面第一次进入,钩子的触发顺序 created
=> mounted
=> activated
,退出时触发deactivated
。当再次进入(前进或者后退)时,只触发activated
。
<keep-alive>
的 props :
- include:定义缓存白名单,会缓存名单里面的组件
- exclude:定义缓存黑名单,被命中的组件不会被缓存
- max:定义缓存组件的上限
<keep-alive include='include_components' exclude='exclude_components'>
<component>
<!-- 该组件是否缓存取决于include和exclude属性 -->
</component>
</keep-alive>
include
- 字符串或正则表达式,只有名称匹配的组件会被缓存
exclude
- 字符串或正则表达式,任何名称匹配的组件都不会被缓存
include
和 exclude
的属性允许组件有条件地缓存。二者都可以用“,”分隔字符串、正则表达式、数组。当使用正则或者是数组时,要记得使用
v-bind` 。
<!-- 逗号分隔字符串,只有组件a与b被缓存。 -->
<keep-alive include="a,b">
<component></component>
</keep-alive>
<!-- 正则表达式 (需要使用 v-bind,符合匹配规则的都会被缓存) -->
<keep-alive :include="/a|b/">
<component></component>
</keep-alive>
<!-- Array (需要使用 v-bind,被包含的都会被缓存) -->
<keep-alive :include="['a', 'b']">
<component></component>
</keep-alive>