keep-alive 是 Vue 的内置组件,当它包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。
keep-alive
包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们
使用场景
使用原则:当我们在某些场景下不需要让页面重新加载时我们可以使用keepalive
例如:
当我们从首页
–>列表页
–>商详页
–>再返回
,这时候列表页应该是需要keep-alive
从首页
–>列表页
–>商详页
–>返回到列表页(需要缓存)
–>返回到首页(需要缓存)
–>再次进入列表页(不需要缓存)
,这时候可以按需来控制页面的keep-alive
使用方式1:结合include和exclude
keep-alive
可以设置以下props
属性:
include
- 字符串或正则表达式。只有名称匹配的组件会被缓存exclude
- 字符串或正则表达式。任何名称匹配的组件都不会被缓存max
- 数字。最多可以缓存多少组件实例
注意: include/exclude 值是组件中的 name 命名,而不是路由中的组件 name 命名
// router.js
{
path: '/home',
name: 'home',
component: () => import('../views/home.vue')
},
{
path: '/test',
name: 'test',
component: () => import('../views/test.vue')
},
// App.vue
<keep-alive include="test">
<router-view/>
</keep-alive>
----------------------------------------------------------------------------------------------------------------
补充: include/exclude 值的多种形式。
// 1. 将缓存 name 为 test 的组件(基本)
<keep-alive include='test'>
<router-view/>
</keep-alive>
// 2. 将缓存 name 为 a 或者 b 的组件,结合动态组件使用
<keep-alive include='a,b'>
<router-view/>
</keep-alive>
// 3. 使用正则表达式,需使用 v-bind
<keep-alive :include='/a|b/'>
<router-view/>
</keep-alive>
// 4.动态判断
<keep-alive :include='includedComponents'>
<router-view/>
</keep-alive>
// 5. 将不缓存 name 为 test 的组件
<keep-alive exclude='test'>
<router-view/>
</keep-alive>
// 6. 和 `<transition>` 一起使用
<transition>
<keep-alive>
<router-view/>
</keep-alive>
</transition>
// 7. 数组 (使用 `v-bind`)
<keep-alive :include="['a', 'b']">
<component :is="view"></component>
</keep-alive>
使用方式2:通过路由中的 meta 属性控制是否需要缓存
将 test 路由中的 meta 添加 keepAlive 属性为 true,表示当前路由组件要进行缓存。
在路由中设置keepAlive
属性判断是否需要缓存
// router.js
{
path: '/home',
name: 'home',
component: () => import('../views/home.vue')
},
{
path: '/test',
name: 'test',
meta:{
keepAlive:true
},
component: () => import('../views/test.vue')
},
<keep-alive>
<router-view v-if="$route.meta.keepAlive" />
</keep-alive>
<router-view v-if="!$route.meta.keepAlive" />
使用方式3:结合路由守卫来实现
实际开发中,我们可以结合路由守卫来实现需要缓存组件的缓存。
export default {
beforeRouteLeave(to, from, next) {
to.meta.keepAlive = true;
next();
}
}
生命周期函数
设置了 keep-alive 缓存的组件,会多出两个生命周期钩子(activated
与deactivated
):
- 首次进入组件时:
beforeRouteEnter
>beforeCreate
>created
>mounted
>activated
> … … >beforeRouteLeave
>deactivated
- 再次进入组件时:
beforeRouteEnter
>activated
> … … >beforeRouteLeave
>deactivated