Vue—KeepAlive源码探究，适时清理页面缓存

使用过 Vue 的小伙伴们肯定都知道，Vue 的内部组件 keep-alive 是用来缓存我们不活动的组件的。

但是在某些情况下，我们需要缓存，某些情况下希望及时释放掉缓存，那我们应该怎么做呢？

有个场景是，希望模仿App的方式，每次push到当前页面的时候，触发 mounted 进行组件初始化，而从其他页面返回到当前页面时，希望可以保留当前组件的状态。

举个例子：
移动端的分页列表页面，加载了几页，并且有滑动记录，但是希望进详情页后，返回列表页时，可以保持分页的状态以及滑动的轨迹。

需求如上，这就需要 keep-alive 帮助我们缓存组件了。

但是用过 keep-alive 组件的小伙伴肯定明白，如果 include 当前列表页面，虽然可以做到返回列表页保持状态，但是从其他页面前往列表页时，依然会加载缓存的状态，我们不得不采用 activated 钩子方法来处理，但这样总归是不优雅的。

看过一些文字有人说让include的数组变成动态的是否能达到类似的效果，这种方式也非常好，可以很容易的达到我们想要的效果。

阅读过源码之后发现， keep-alive 内部实现是将组件缓存在一个 caches 数组中的，如果我们可以 *** 作这个数组，是否可以达到灵活控制缓存组件的效果呢？

方法一比较繁琐，但是用起来还是很直接的，比较灵活，可以应付浏览器刷新的场景

方法二比较简单，适合在移动app中使用，自己维护页面栈，不会有浏览器刷新等 *** 作，否则include的内容可能会由于刷新而出现栈异常

1、像 vue 这种单页面应用，如果没有应用懒加载，运用 webpack 打包后的文件
将会异常的大，造成进入首页时， 需要加载的内容过多，时间过长，会出现长时间的白
屏，即使做了 loading 也是不利于用户体验，
2、而运用懒加载 则可以将页面进行划分，需要的时候加载页面，可以有效的分
担首页所承担的加载压力，减少首页加载用时。
3、用法：在配置路由时使用：component:resolve=>require([“@components/路
由的路径”]，resolve)。 就是用了懒加载后打完包直接运行那个 indexhtml 会报错，报文
件引用错误其实是打包时候路径配置有点问 题，找到 build 下面的
webpackprodconfjs 添加 publicPath：“/”,
javascript
前端
vuejs
这才是世界排名前十位的奢侈品
精选推荐
广告

vue大数据表格卡顿问题的完美解决方案
24下载·0评论
2021年1月19日
vue加载数据量过多页面卡顿问题（不看会后悔）
5257阅读·1评论·1点赞
2021年8月11日
vue 页面首次加载缓慢原因及解决方案，打包代码压缩Gzip，压缩
402阅读·1评论·0点赞
2022年11月15日
项目问题Vue首屏加载慢（vue首次加载慢）
3821阅读·0评论·2点赞
2021年10月13日
android vuejs点击反应慢,解决vue 界面在苹果手机上滑动点击事件等卡顿问题
602阅读·0评论·0点赞
2021年6月2日
vue 路由跳转很慢，页面卡死
5353阅读·2评论·0点赞
2022年5月26日
老公出轨第三者要离婚，聪明的女人是怎么做的？你一定要看！

03:29
原配联盟
广告
VUE倒计时组件，解决setInterval （）引起页面卡顿问题
1153阅读·0评论·1点赞
2022年7月15日
vue项目在浏览器越跑越卡的解决
1434阅读·0评论·0点赞
2022年8月10日
vue项目中请求数据特别多导致页面卡死
5229阅读·0评论·2点赞
2022年3月14日
Vue | Element 页面1000多个 input 组件输入出现卡顿解决方案
2514阅读·0评论·2点赞
2021年6月7日
花裤衩 / vue-ele

背景：
1、A列表页面 --- 跳转到 --- B填写页面 (B页面不要缓存)。
2、A列表页面 --- 跳转到 --- B填写页面(填写了内容) --- 跳转到(B页面需要缓存) --- C选择单位页面再回到B页面，要显示 B页面之前填写的内容。

用vue-router中的keepAlive设置为true是不可行的。

注：：：：：以上这种方式是不行的。

可行方案：
结合keep-alive的include属性和vuex进行缓存。

这种方式不依赖于vue-router中的keepAlive值，那怕设置为false，也可以通过上面的方式进行页面缓存。
这样就OK了！！！

vue中,我们有时候需要实现这种场景:

1搜索页面到列表页面，需要刷新重新获取数据。

2从详情页面返回列表页面需要记住上次浏览的状态。具体流程如下：
第一步:在路由配置文件中为列表页设置meta参数，里面包含useCatch和keepAlive
第二步:在App文件中如下设置
第三步:在列表页面添加leaveTag字段,当点击返回按钮触发返回事件的时候,将leaveTag修改为back,然后在beforeRouteLeave中如下:
第四步:在列表页的actived生命周期函数中根据useCatch字段判断是否需要缓存:
这种处理方式会有bug,打开列表页会有上次的残留停顿一下,最新文章已解决,详情请看我的最新文章。

需求1:
pageA -> pageB -> pageC
缓存 pageB :
从 pageA 进入 pageB ,刷新页面并缓存页面;
从 pageC 返回 pageB ,不刷新页面

keep-alive 会缓存 include 中存在的组件,会清除 exclude 中的组件缓存;

返回 pageA 时,手动清除 pageB 的缓存;

需求2:
使用缓存页面,大多数都是列表页进入详情页,所以还需要考虑列表页的滚动位置的问题
即: pageC 返回 pageB 时, pageB 要保持在离开时的位置

keep-alive 是 vue 中的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染 DOM

keep-alive 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们

keep-alive 可以设置以下 props 属性：

关于 keep-alive 的基本用法：

使用 includes 和 exclude ：

匹配首先检查组件自身的 name 选项，如果 name 选项不可用，则匹配它的局部注册名称 (父组件 components 选项的键值)，匿名组件不能被匹配

设置了 keep-alive 缓存的组件，会多出两个生命周期钩子（ activated 与 deactivated ）：

使用原则：当我们在某些场景下不需要让页面重新加载时我们可以使用 keepalive

举个栗子:

当我们从 首页 –> 列表页 –> 商详页 –> 再返回 ，这时候列表页应该是需要 keep-alive

从 首页 –> 列表页 –> 商详页 –> 返回到列表页(需要缓存) –> 返回到首页(需要缓存) –> 再次进入列表页(不需要缓存) ，这时候可以按需来控制页面的 keep-alive

在路由中设置 keepAlive 属性判断是否需要缓存

使用 <keep-alive>

keep-alive 是 vue 中内置的一个组件

源码位置：src/core/components/keep-alivejs

可以看到该组件没有 template ，而是用了 render ，在组件渲染的时候会自动执行 render 函数

thiscache 是一个对象，用来存储需要缓存的组件，它将以如下形式存储：

在组件销毁的时候执行 pruneCacheEntry 函数

在 mounted 钩子函数中观测 include 和 exclude 的变化，如下：

如果 include 或 exclude 发生了变化，即表示定义需要缓存的组件的规则或者不需要缓存的组件的规则发生了变化，那么就执行 pruneCache 函数，函数如下：

在该函数内对 thiscache 对象进行遍历，取出每一项的 name 值，用其与新的缓存规则进行匹配，如果匹配不上，则表示在新的缓存规则下该组件已经不需要被缓存，则调用 pruneCacheEntry 函数将其从 thiscache 对象剔除即可

关于 keep-alive 的最强大缓存功能是在 render 函数中实现

首先获取组件的 key 值：

拿到 key 值后去 thiscache 对象中去寻找是否有该值，如果有则表示该组件有缓存，即命中缓存，如下：

直接从缓存中拿 vnode 的组件实例，此时重新调整该组件 key 的顺序，将其从原来的地方删掉并重新放在 thiskeys 中最后一个

thiscache 对象中没有该 key 值的情况，如下：

表明该组件还没有被缓存过，则以该组件的 key 为键，组件 vnode 为值，将其存入 thiscache 中，并且把 key 存入 thiskeys 中

此时再判断 thiskeys 中缓存组件的数量是否超过了设置的最大缓存数量值 thismax ，如果超过了，则把第一个缓存组件删掉

解决方案可以有以下两种：

每次组件渲染的时候，都会执行 beforeRouteEnter

在 keep-alive 缓存的组件被激活的时候，都会执行 actived 钩子

注意：服务器端渲染期间 avtived 不被调用

1、首先将vue引入的海康摄像里面设置一个要缓存数组。
2、其次在进到子页面的时候，更新store的数组，把将要缓存组件的name装进数组。
3、最后关闭标签页清空store里的数组即可成功清除缓存。

开发的系统功能在切换职责的时候需要清理缓存页面，否则不同职责包含相同页面的时候，如果有缓存的情况下会把上一个职责缓存过的页面直接显示出来，但是权限控制就有问题，所以在切换职责菜单的时候一定要把缓存清理干净；

网上搜了一圈并测试，没有找到一个合适的，而且keep-alive这个组件也没有提供清理缓存的API，没办法看了一下keep-alive源码： >