如何优化Vue应用中缓存页面的管理策略？

本文共计2491个文字，预计阅读时间需要10分钟。

使用Vue中的内置组件`keep-alive`，可以缓存SPA应用中的路由页面，提升页面访问速度。通过配置全局或局部的`keep-alive`，实现对路由页面的缓存，包括全部页面或特定页面的缓存。

<keep-alive> <router-view /> </keep-alive>

Vue中内置的<keep-alive>组件可以帮助我们在开发SPA应用时，通过把全部路由页面进行缓存(当然也可以有针对性的缓存部分页面)，显著提高页面二次访问速度，但是也给我们在某些场景带来了困扰，其中包含两个主要矛盾：

1. 缓存页面如何在合适的时机被销毁 （keep-alive组件提供了三个参数来动态配置缓存状态，但是作用有限，后面分析）
2. 同一个路径如何缓存多个不同的页面(同页不同参)，比如淘宝商品页面继续跳转另一个商品页面

本文主要围绕这两个问题探讨，后文用问题一和问题二指代。

本文默认所有页面都是keep-alive

问题一 销毁

当随着业务逻辑变得复杂，路由栈也逐渐升高，理论上用户可以无限的路由下去，不可避免的我们需要管理这些缓存在内存中的页面数据，页面数据包含两部分，Vue实例和对应的Vnode。