如何有效设置Vue应用中的页面缓存策略？

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

使用Vue内置的keep-alive组件，可以通过缓存全部路由页面（或特定页面）来优化SPA应用的开发。这能显著提升页面二次访问速度。

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

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

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

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

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

问题一 销毁

当随着业务逻辑变得复杂，路由栈也逐渐升高，理论上用户可以无限的路由下去，不可避免的我们需要管理这些缓存在内存中的页面数据，页面数据包含两部分，Vue实例和对应的Vnode。查看 Vue 源码中src/core/components/keep-alive.js关于缓存的定义

this.cache = Object.create(null) //用来缓存vnode cache[key] => Vnode this.keys = [] //用来记录已缓存的vnode的key

缓存后并不会重用 Vnode，而是只用它上面挂载的 Vue 实例。