keep-alive是Vue提供给我们使用的高阶组件。我们可以使用keep-alive缓存需要缓存的组件,进而节省性能。当组件在keep-alive内被切换时组件的activated、deactivated这两个生命周期钩子函数会被执行。
被keep-alive包裹的内容会被缓存,当然我们并不是所有的页面都要缓存,Vue提供了include
、exclude
两个属性给我们有条件的缓存。
<keep-alive include="nameList">
<router-view></router-view>
</keep-alive>
<keep-alive exclude="adminList">
<router-view></router-view>
</keep-alive>
上面代码表示组件名为nameList
的组件将被缓存,而除了名为adminList
的组件都会被缓存。我们可以使用正则来匹配我们需要的组件名称。
在实际项目开发中,我们可以结合router
的meta
配置来按需进行组件缓存,如iView admin中就封装了组件缓存功能。
<keep-alive :include="cacheList">
<router-view/>
</keep-alive>
绑定了一个缓存列表,我们看看缓存列表怎么实现
cacheList () {
return this.tagNavList.length ? this.tagNavList.filter(item => !(item.meta && item.meta.notCache)).map(item => item.name) : []
},
这个就是过滤出路由配置中notCache为false的路由名字
{
path: '/login',
name: 'login',
meta: {
title: 'Login - 登录',
notCache: true
},
component: Login
},
这就是在路由文件中的配置