1.用处
主要用于保留组件状态或避免重新渲染。
2.属性
- include 字符串,数组或正则表达式。只有名称匹配的组件会被缓存。
- exclude 字符串,数组或正则表达式。任何名称匹配的组件都不会缓存。
- max 数字。最多可以缓存多少组件实例。
3.介绍
< keep-alive > 包裹动态组件时,会被缓存不活动的组件实例,而不是销毁它们。
< keep-alive > 是个抽象组件,它自身不会渲染一个DOM元素,也不会出现在组件的父组件链中。
当组件在< keep-alive >内切换,它的 activated 和 deactived 这两个生命周期钩子函数将会被对应执行。
4.使用
1. include
<keep-alive>
<component /> //需要缓存的组件
</keep-alive>
<!-- 逗号分隔字符串 -->
<keep-alive include="a,b">
<component :is="view"></component>
</keep-alive>
<!-- 正则表达式 (使用 `v-bind`) -->
<keep-alive :include="/a|b/">
<component :is="view"></component>
</keep-alive>
<!-- 数组 (使用 `v-bind`) -->
<keep-alive :include="['a', 'b']">
<component :is="view"></component>
</keep-alive>
<!-- 只缓存组件name为a或者b的组件 -->
<keep-alive include="a,b">
<component />
</keep-alive>
<!-- excludet同理 -->
2. excludet
<!-- 组件name为a的组件不缓存-->
<keep-alive exclude="a">
<component />
</keep-alive>
<!-- 注意:如果同时使用include,exclude,那么exclude优先于include, 下面的例子只缓存a组件-->
<keep-alive include="a,b" exclude="b">
<component />
</keep-alive>
3. max
<!-- 最多可以缓存多少组件实例。一旦这个数字达到了,在新实例被创建之前,已缓存组件中最久没有被访问的实例会被销毁掉。-->
<keep-alive max="5">
<component />
</keep-alive>
5.使用中可能遇到的问题
- 当引入keep-alive 的时候,页面第一次进入,钩子的触发顺序created> mounted> activated,
退出时触发deactivated。当再次进入(前进或者后退)时,只触发activated。
注意:我们知道 keep-alive 之后页面模板第一次初始化解析变成HTML片段后,再次进入就不在重新解析而是读取内存中的数据,即,只有当数据变化时,才使用VirtualDOM进行diff更新。有需要的话,页面进入的数据获取应该在activated中也放一份。数据下载完毕手动操作DOM的部分也应该在activated中执行才会生效。
所以,有需要的话,应该activated中留一份数据获取的代码,或者不要created部分,直接将created中的代码转移到activated中。
- 匹配首先检查组件自身的 name 选项,如果 name 选项不可用,则匹配它的局部注册名称 (父组件 components 选项的键值)。匿名组件不能被匹配。
- 不会在函数式组件中正常工作,因为它们没有缓存实例。
- 最多可以缓存多少组件实例。一旦这个数字达到了,在新实例被创建之前,已缓存组件中最久没有被访问的实例会被销毁掉。