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

Posted 2023-05-06

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

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

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

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

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

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

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

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

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

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

vue内置组件之keepAlive

需求描述：

    从花名册的查看/新增/修改页面进入到花名册列表页面时保持当前的搜索页面，从其他页面进入到花名册列表页时要初始化页面，即清空搜索条件并刷新当前列表。

解决方案：keepAlive+vue-router

点击阅读原文查看详情