keep-alive，字面意思就是保持活着，对于组件来说什么是活着呢，那就是保持状态，它能在组件切换过程中将状态保留在内存中，防止重复渲染DOM，相当于是你浏览器点了返回按钮的效果一样，由于避免了重复渲染DOM，所以相当于它还有一个避免重复渲染，对于性能提升也是有所帮助的。
1.使用场景
一般用于列表页，例如淘宝网的商品列表，点击进入详情查看之后，点击返回，肯定是回到之前浏览的地方，不然回到顶部再让用户重新划到之前浏览的位置就显得用户体验很差
2.使用方法
- 结合路由
meta使用（<keep-alive>和<transition>相似，是一个抽象组件，它自身不会渲染一个 DOM 元素，也不会出现在父组件链中），通过路由meta信息中的keepAlive字段的值来进行判断是否需要使用keep-alive，嵌套在<keep-alive>标签中的<router-view>就是使用缓存的。
//App.vue
<keep-alive>
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>
//router > index.ts
{
path: '/',
name: 'home',
component: Home,
meta:{
title:'首页',
keepAlive:true,
}
},
- 结合
<keep-alive>标签特有的属性include以及exclude字段来进行，include表示需要缓存的页面，exclude表示不需要缓存的页面，可以看见我在data中注册了黑名单和白名单，切记是写上组件中注册的name属性，而不是路由中写的name属性。值得注意的是，当你同一个name的组件，既写在exclude，又写在include中，脚踏两只船时，exclude的权级比include要高，例如a组件脚踏两只船的时候，a组件是不会被缓存哒。
//App.vue
<template>
<div id="app">
<keep-alive :include="whiteList" :exclude="blackList">
<router-view></router-view>
</keep-alive>
</div>
</template>
<script>
export default {
name: 'App',
data(){
return{
isRouterAlive:true,
whiteList:['styleLibrary','OrderList','SalesData'],
blackList:['Footer'],
personShow:false,
}
},
}
</script>
3.设置keep-alive的可缓存组件最大数,prop属性名为max，通过设置max，可以控制可缓存组件的最大数，当缓存的数量达到最大时，采用LRU算法，将最近最久未使用的页面予以淘汰，再将新页面进行缓存，关于LRU算法感兴趣的可以去看看
//App.vue
<template>
<div id="app">
<keep-alive :max="max">
<router-view></router-view>
</keep-alive>
</div>
</template>
4.keep-alive的生命周期
created>mounted>activated>deactivated
由于keep-alive会缓存当前的状态，所以对于created和mounted的生命周期只会触发一次，但是每次进入这个页面，都会触发activated生命周期，而且每次退出的时候会触发deactivated生命周期，而且我在activated生命周期中写了一个alert('我来了'),发现是先弹出提示，然后才是到相应的页面，也就是说执行顺序在路由跳转之前，deactivated同理，都是执行完了，再进行路由跳转。总结而言，比方说你的首页使用了<keep-alive>，那么，只有第一次到首页会触发created以及mounted，你后面无论再到首页多少次，都不会触发created以及mounted，除非你手动刷新，但是只要你到首页，无论第几次，进来都会触发activated，离开都会触发deactivated
本文使用 mdnice 排版
