引言
对于使用过Vue.js开发过网页的小伙伴，对于keep-alive那可是熟透了，但是对于刚入门的小白，咱还是稍微介绍一下。
keep-alive主要用于保留组件状态或避免重新渲染，而不是销毁它们，它的最大好处还是当我们在组件之间来回切换的时候，它可以很好的避免反复渲染带来的性能问题，就比如经常的tabs标签切换，用户可能会高频切换，并且在返回还想保留之前所做的操作，那么我们的keep-alive就可以派上很大的用场了。
具体使用参照vue.js官网 keep-alive使用
想想
说到这里，我想问一下大家keep-alive怎么样做到灵活使用呢？
场景
举个例子：移动端H5项目，订单列表页面，有分页，当我们滑动的时候，就会加载相应的数据，当我们前往了订单详情页面，再从订单详情返回订单列表，这时产品需要让我们前端的小伙伴做到在返回后，需要保持上次加载的数据以及滑动的位置，这个时候就会有聪明的同学说keep-alive，没错，就是它，很棒的。。。
大家有没有想过使用keep-alive会存在这样的问题，当其他页面过来都会缓存，也就是不会执行组件的mounted生命周期钩子，那这就麻烦大了，我们的很多初始化的东西都写在这个钩子里。
哈哈，莫慌，莫慌，办法都是人想出来的嘛，这不，下面就教大家三种解决方法
解决
1、运用activated生命周期钩子（vue官方提供的）
初始化的内容都写在activated钩子里，这个时候不管去哪个页面，再回到当前页面，数据都会更新，因为之前隐藏的组件，这时被激活了，但是组件的状态还是上次的，其实组件的消失和隐藏，跟v-show有点像，并不是销毁
2、手动操作keep-alive
看过vue源码的同学，会发现keep-alive实现会将组件存放在caches数组当中，这个时候我们对数组进行操作，这个时候，就可以做到前往其他页面的时候，该缓存还是不该缓存，这样就可以达到灵活使用
参考源码片段
下面给大家提供手动清除缓存的方法
removeKeepAliveCacheForVueInstance(vueInstance) {
let key =
vueInstance.$vnode.key ??
vueInstance.$vnode.componentOptions.Ctor.cid + (vueInstance.$vnode.componentOptions.tag ? `::${vueInstance.$vnode.componentOptions.tag}` : "");
let cache = vueInstance.$vnode.parent.componentInstance.cache;
let keys = vueInstance.$vnode.parent.componentInstance.keys;
if (cache[key]) {
vueInstance.$destroy();
delete cache[key];
let index = keys.indexOf(key);
if (index > -1) {
keys.splice(index, 1);
}
}
}
主要核心是通过vueInstance.$vnode.parent.componentInstance获取到keep-alive实例，清除cache的同时，destory当前实例
3、动态控制include
当我们进行页面切换的时候，页面前进，给params带上push标记，后退，就给params带上pop标记。
这时在App.vue，监听路由的变化，来动态控制include，如果to.params.cachesType为push标记，则需要缓存，否则不需要。
watch: {
$route(to) {
// 如果涉及到同一页面的push操作，需要去重后插入
if (to.params.cachesType == "push") {
this.include.push(to.name);
} else {
this.include.pop();
}
// 处理tabbar需要清栈的情况
if (to.params.clearRoute) {
this.include = ["Index"];
}
},
},
总结
到这里本次的记录就快结束了，简单说一下这三种方法的区别吧
方法一：是vue官方提供的，虽然好用，但是他的缺点是不能够灵活缓存。
方法二：操作起来比较直接，但写起来比较烦，优点嘛，就是很灵活，配合导航守卫beforeRouteLeave（离开该页面时触发的守卫），在前往页面前，如果需要清除缓存，则进行调用removeKeepAliveCacheForVueInstance方法即可，可应对浏览器刷新存在的问题。
方法三：一般用于移动端H5，自己维护页面栈，但是如果有刷新，会导致页面栈异常，从而导致include的内容出现问题。
最后提醒一下大家，不要太喜欢 keep-alive了，毕竟人家也会害羞的哦！！
在公司大佬的指点下，有所感悟，所以写下本篇文章，希望可以帮到大家
有兴趣的同学可以关注大佬
大家一起进步，互相学习！！！
