在使用vue做开发的时候,我们有时会遇到需要保留组件状态的情况,防止页面重新绘制,这时候就需要使用keep-alive组件,该组件属于vue的内置组件,同transition一样,他本身不会渲染。
当组件在 <keep-alive>
内被切换,它的 activated
和 deactivated
这两个生命周期钩子函数将会被对应执行,也就是说使用了keep-alive后组件被激活(被切换到的时候)会遇到钩子函数activated,当被切换掉时候会执行deactivated钩子函数。
1.用在组件上
在官网上有这样的一个例子:
上边的例子在使用了<keep-alive></keep-alive>后,在切换tab后cat ipsum也不会重新渲染,他会被保存到内存中,下次切换回来直接读取。
2.结合v-router,缓存页面
使用v-router的meta属性可以做到,如下的代码:
<keep-alive>
<router-view v-if="$route.meta.live"/>
</keep-alive>
<router-view v-if="!$route.meta.live"/>
//router.js
export defualt new Router({
routes: [
{
path: '/',
name: 'Hello',
component: Hello,
meta: {
live: false // 不需要缓存
}
},
{
path: '/About',
name: 'About',
component: About,
meta: {
live: true // 需要被缓存
}
}
]
})
复制代码
这样处理后的页面跳转会根据meta.live这个属性判断是否缓存
3.props,实现有条件的缓存
<keep-alive>有两个重要的属性 :
1.include: - 字符串或正则表达式。只有匹配的组件会被缓存
//字符串
<keep-alive include="a,b">
<component :is="view"></component>
</keep-alive>
//正则,必须使用v-bind:include
<keep-alive v-bind:include="/a|b/">
<component :is="view"></component>
</keep-alive>
复制代码
2.
exinclude
: - 字符串或正则表达式。排除不会缓存的组件