Vue 之keep-alive的使用，实现页面缓存

什么是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组件会显著提升用户体验：

1. 商品列表页点击商品跳转到商品详情，返回后仍显示原有信息
2. 订单列表跳转到订单详情，返回，等等场景。

keep-alive的生命周期

• 初次进入时：
  1. created > mounted > activated
  2. 退出后触发 deactivated
• 再次进入：
  1. 只会触发 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('/').length
let fromDepth = from.path.split('/').length
if (toDepth < fromDepth) {
  // console.log('后退。。。')
  from.meta.keepAlive = false
  to.meta.keepAlive = true
}
复制代码

记录页面滚动位置

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

1. 在deactivated钩子中记录当前滚动位置，在这里我使用的是localStorage：

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

2. 在activated钩子中滚动：

this.cacheData = window.localStorage.getItem(this.key) ? JSON.parse(window.localStorage.getItem(this.key)) : null
$('.sidebar-item').scrollTop(this.cacheData.listScrollTop)
复制代码

参考连接：

• vue实现前进刷新，后退不刷新
• 在动态组件上使用 keep-alive