前端开发必备技能知识笔记-keep-alive（路由缓存）
前言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 数组来实现按需缓存。
页:
[1]