vue 中keepAlive注意事项
问题描述:今天在测试提到了一个bug,当重复进入相同的组建的时候,mounted和created内的方法不触发,导致页面展示不一样原因:<keep-alive> 包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。和 <transition> 相似,<keep-alive> 是一个抽象组件:它自身不会渲染一个
·
问题描述:
今天在测试提到了一个bug,当重复进入相同的组建的时候,mounted和created内的方法不触发,导致页面展示不一样
原因:
<keep-alive>
包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。和 <transition>
相似,<keep-alive>
是一个抽象组件:它自身不会渲染一个 DOM 元素,也不会出现在父组件链中。(所以不会触发mounted和created事件钩子)
当组件在 <keep-alive>
内被切换,它的 activated
(激活)和 deactivated
(不激活)这两个生命周期钩子函数将会被对应执行。
include
and exclude
include
(缓存的文件)和 exclude(不换存文件)
属性允许组件有条件地缓存。
<!-- 逗号分隔字符串 -->
<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>
max
最多可以缓存多少组件实例。
<keep-alive :max="10">
<component :is="view"></component>
</keep-alive>
更多推荐
已为社区贡献8条内容
所有评论(0)