什么时候用到keep-alive
如果没有缓存,每点击一次导航,内容区就会创建一个组件,该组件会经历整个生命周期,每点击一次,就会创建一个组件,比较浪费性能,
这时,我们就要考虑到是否能将点击过的已创建的组件进行缓存,当再次点击已访问过的组件时,这时,就会从缓存中获取该组件,而不会重新创建,这就用到keep-alive
Props:
include - 字符串或正则表达式。只有名称匹配的组件会被缓存。
exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存。
max - 数字。最多可以缓存多少组件实例。
<keep-alive>
包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。主要用于保留组件状态或避免重新渲染。
当组件在 <keep-alive>
内被切换,它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。
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>
匹配首先检查组件自身的 name 选项,如果 name 选项不可用,则匹配它的局部注册名称 (父组件 components 选项的键值)。匿名组件不能被匹配。
keep-alive对应两个生命周期, activated(){} deactivated(){}
当从缓存中读取a组件时,此时a组件处于活跃状态,
当从缓存中读取b组件时,a组件处于缓存状态,此时b组件处于活跃状态,
用途:
例如: 当在a组件浏览小说到某个位置,这时,我切换到b组件,那么就用a组件的缓存状态函数( deactivated )记录这个位置,
当我再次切换到a组件,用活跃状态函数( activated ) 回到该位置
activated() {
console.log("活跃状态");
},
deactivated() {
console.log("缓存状态")
}
最多可以缓存多少组件实例。一旦这个数字达到了,在新实例被创建之前,已缓存组件中最久没有被访问的实例会被销毁掉。
<keep-alive :max="10">
<component :is="view"></component>
</keep-alive>
复杂情况可以使用: meta配合keepalive
export default [
{
path:'/',
name:'home',
components:Home,
meta:{
keepAlive:true //需要被缓存的组件
},
{
path:'/book',
name:'book',
components:Book,
meta:{
keepAlive:false //不需要被缓存的组件
}
]
<keep-alive>
<!--这里是会被缓存的组件-->
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<!--这里是不会被缓存的组件-->
<router-view v-if="!$route.meta.keepAlive"></router-view>