前言
keep-alive是Vue中一个非常有用的特性,它可以帮助我们避免重复渲染和减少组件的渲染次数,从而提高应用程序的性能。
使用场景
以下是keep-alive的一些常见使用场景:
- 列表渲染:当我们需要渲染大量的列表时,使用keep-alive可以缓存已经渲染的列表,避免重复渲染和减少组件的渲染次数,从而提高应用程序的性能
- 组件缓存:当我们需要缓存一些组件,避免重复渲染和减少组件的渲染次数,从而提高应用程序的性能
- 路由缓存:当我们需要缓存一些路由组件,避免重复渲染和减少组件的渲染次数,从而提高应用程序的性能
- 状态管理:当我们需要管理一些状态,避免重复渲染和减少组件的渲染次数,从而提高应用程序的性能
总之,keep-alive可以帮助我们提高应用程序的性能,减少不必要的渲染和计算,从而提高用户体验和应用程序的响应速度。
本文讲述的主要是路由缓存的实现原理
特点
keep-alive
是Vue提供的一个抽象组件,主要用于保留组件状态或避免重新渲染。
<keep-alive>
包裹动态组件时,会缓存不活动的组件实例,而不是销毁他们。
和<transition>
相似, <keep-alive>
是一个抽象组件,它自身不会渲染一个DOM元素,也不会出现在父组件链中。
但是 keep-alive
会把其包裹的所有组件都缓存起来。
路由缓存
场景
当我们切换路由时,切出路由组件会销毁,所有列表页进入详情页列表页会销毁,重新回到列表页,列表页组件会重新加载。
原理
把需要缓存和不需要缓存的组件区分开,在组件的路由配置的元信息,meta中定义哪些需要缓存哪些不需要缓存
实现
具体代码如下:
1,定义两个出口 router-view
<keep-alive>
<!-- 需要缓存的视图组件 -->
<router-view v-if="$route.meta.keepAlive">
</router-view>
</keep-alive>
<!-- 不需要缓存的视图组件 -->
<router-view v-if="!$route.meta.keepAlive">
</router-view>
2,在router配置中定义哪些需要缓存哪些不需要缓存
new Router({
routes: [
{
path: '/',
name: 'index',//首页
component: () => import('./views/keep-alive/index.vue')
},
{
path: '/list',
name: 'list',//列表页
component: () => import('./views/keep-alive/list.vue'),
meta: {
keepAlive: true //需要被缓存
}
},
{
path: '/detail',
name: 'detail',//详情页
component: () => import('./views/keep-alive/detail.vue')
}
]
})
按需缓存组件
include参数
keep-alive组件如果设置了 include ,就只有和 include 匹配的组件会被缓存,所以思路就是,动态修改 include 数组来实现按需缓存。
<template>
<keep-alive :include="include">
<!-- 需要缓存的视图组件 -->
<router-view v-if="$route.meta.keepAlive">
</router-view>
</keep-alive>
<!-- 不需要缓存的视图组件 -->
<router-view v-if="!$route.meta.keepAlive">
</router-view>
</template>
<script>
export default {
name: 'app',
data: () => ({
include: [],
}),
watch: {
$route(to, from) {
// 如果 要 to(进入) 的页面是需要 keepAlive 缓存的,把 name push 进 include数组
if (to.meta.keepAlive) {
if (!this.include.includes(to.name)) {
this.include.push(to.name);
}
}
},
},
};
</script>
此时我们发现,从详情页返回列表页,列表页真的不再刷新了。
进阶
新的问题又出现了,由于列表页被缓存了,这个时候我从首页,再点击进入某个列表,也不刷新了。完了,点击首页导航应该进入不同的列表页的,也就是说,从首页进入列表组件不应该被缓存的。
解决一下,我们在定义路由时,在meta(元信息)中再加一个字段,这里是deepth字段,代表进入路由的层级,比如首页路由deepth是0.5,列表页是1,详情页是2,如下所示:
new Router({
routes: [
{
path: '/',
name: 'index',
component: () => import('./views/keep-alive/index.vue'),
meta: {
deepth: 0.5 // 定义路由的层级
}
},
{
path: '/list',
name: 'list',
component: () => import('./views/keep-alive/list.vue'),
meta: {
deepth: 1
keepAlive: true //需要被缓存
}
},
{
path: '/detail',
name: 'detail',
component: () => import('./views/keep-alive/detail.vue'),
meta: {
deepth: 2
}
}
]
})
然后在 app.vue中增加监听器,监听我们进入路由的方向,具体代码如下:
<template>
<keep-alive :include="include">
<!-- 需要缓存的视图组件 -->
<router-view v-if="$route.meta.keepAlive">
</router-view>
</keep-alive>
<!-- 不需要缓存的视图组件 -->
<router-view v-if="!$route.meta.keepAlive">
</router-view>
</template>
<script>
export default {
name: 'app',
data: () => ({
include: [],
}),
watch: {
$route(to, from) {
// 如果 要 to(进入) 的页面是需要 keepAlive 缓存的,把 name push 进 include数组
if (to.meta.keepAlive) {
if (!this.include.includes(to.name)) {
this.include.push(to.name);
}
}
// 如果 要 form(离开) 的页面是 keepAlive缓存的,
// 再根据 deepth 来判断是前进还是后退
// 如果是后退
if (from?.meta?.keepAlive && to?.meta?.deepth < from?.meta?.deepth) {
const index = this.include.indexOf(from.name);
// 后退情况下,移除include数组里面的返回前的路由,保证下次进入的时候这个路由下的页面会刷新
if (index > -1) {
this.include.splice(index, 1);
}
}
},
},
};
</script>