Vue 进阶（幺玖肆）：keep-alive 实现页面缓存

一、引入场景

有时候我们不希望组件被重复渲染影响用户使用体验；或出于性能考虑，避免多次重复渲染降低性能。而是希望组件信息可以缓存下来,维持当前的状态。这时候就可以应用keep-alive组件。

官网解释：<keep-alive> 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 <transition> 相似，<keep-alive> 是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在父组件链中。 当组件在 <keep-alive> 内被切换，它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。 在 2.2.0 及其更高版本中，activated 和 deactivated 将会在 <keep-alive> 组件内的所有嵌套组件中触发。 主要用于保留组件状态或避免重新渲染。

二、应用场景

如果未使用keep-alive组件，则在页面回退时仍然会重新渲染页面，触发created钩子，用户体验不好。 在菜单存在多级关系，多见于列表页+详情页的场景，使用keep-alive组件会显著提高用户体验，如：商品列表页点击商品跳转到商品详情，返回后仍显示原有信息，订单列表跳转到订单详情，返回，等等场景。

三、keep-alive 生命周期

• 初次进入时：created > mounted > activated；退出后触发 deactivated;

• 再次进入：会触发 activated；事件挂载的方法等，只执行一次的放在 mounted 中；组件每次进去执行的方法放在 activated 中;

四、项目实践

1.更改App.vue

<div id="app" class='wrapper'>    <keep-alive>        <!-- 需要缓存的视图组件 -->         <router-view v-if="$route.meta.keepAlive"></router-view>     </keep-alive>      <!-- 不需要缓存的视图组件 -->     <router-view v-if="!$route.meta.keepAlive"></router-view></div>

2.在路由中设置keepAlive

{  path: 'list',  name: 'itemList', // 商品管理  component (resolve) {    require(['@/pages/item/list'], resolve) }, meta: {  keepAlive: true,  title: '商品管理' }}

3.更改 beforeEach钩子

这一步是为了清空无用的页面缓存。 假设现在 A、B 两个页面都开启的缓存：

若第一次进入 A 页面后退出，再次进入页面时，页面不会刷新。这和目前的业务逻辑不符。我们想要的结果是 A 页面前进后返回，页面保持不变，而不是退出后重新进入保持不变。

在进入过 A 页面后进入 B 页面，经过测试后发现，B 页面竟然会显示 A 页面的缓存，尽管url已经改变。

为了解决这个问题，需要判断页面是在前进还是后退。 在beforeEach钩子添加代码：

let toDepth = to.path.split('/').lengthlet fromDepth = from.path.split('/').lengthif (toDepth < fromDepth) {  // console.log('back...')  from.meta.keepAlive = false  to.meta.keepAlive = true}

五、记录页面滚动位置

keep-alive并不会记录页面滚动位置，如需在跳转时需要记录当前的滚动位置，可在触发activated钩子时重新定位到原有位置。 具体设计思路：

在deactivated钩子中记录当前滚动位置，使用localStorage：

deactivated () { window.localStorage.setItem(this.key, JSON.stringify({ listScrollTop: this.scrollTop }))}

在activated钩子中滚动：

this.cacheData = window.localStorage.getItem(this.key) ？JSON.parse(window.localStorage.getItem(this.key)) : null$('.sidebar-item').scrollTop(this.cacheData.listScrollTop)