keep-alive缓存优化实践总结

keep-alive

<keep-alive>是Vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。
<keep-alive> 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 <transition> 相似，<keep-alive> 是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在父组件链中。

具体应用场景

搜索列表页==>详情页==>返回列表页，保存上次已经加载出来的数据和自动还原上次的浏览位置

keep-alive钩子函数

 先简单说一下和缓存相关的vue钩子函数。
 对于设置了keepAlive缓存的组件：
  第一次进入：beforeRouterEnter->created->activated->deactivated
  后续进入时：beforeRouterEnter ->activated->deactivated
可以看出，只有第一次进入该组件时，才会走created钩子，而需要缓存的组件中activated是每次都会走的钩子函数。所以，为了避免重复请求，我们要在activated这个钩子里面去判断，当前组件是需要使用缓存的数据还是重新刷新获取数据。

prop:

include: 字符串或正则表达式。只有匹配的组件会被缓存。
exclude: 字符串或正则表达式。任何匹配的组件都不会被缓存。

常见用法：

// 组件
export default {
  name: 'test-keep-alive',
  data () {
    return {
        includedComponents: "test-keep-alive"
    }
  }
}

<keep-alive include="test-keep-alive">
  <!-- 将缓存name为test-keep-alive的组件 -->
  <component></component>
</keep-alive>

<keep-alive include="a,b">
  <!-- 将缓存name为a或者b的组件，结合动态组件使用 -->
  <component :is="view"></component>
</keep-alive>

<!-- 使用正则表达式，需使用v-bind -->
<keep-alive :include="/a|b/">
  <component :is="view"></component>
</keep-alive>

<!-- 动态判断 -->
<keep-alive :include="includedComponents">
  <router-view></router-view>
</keep-alive>

<keep-alive exclude="test-keep-alive">
  <!-- 将不缓存name为test-keep-alive的组件 -->
  <component></component>
</keep-alive>

结合router实现步骤

• 保存上次已经加载出来的数据

需要在<button>router</button>中设置router的元信息meta，（scrollTop属性的设置为了保存浏览位置，后面再说）：

    export const constantRouterMap = 
    [{
        path: 'index',
        name: 'list',
        hidden: true,
        meta: { title: '客户管理', keepAlive: true, scrollTop: 0 },
        component: () => import('@/views/List')
      },
      {
        path: 'clientInfo',
        name: 'clientInfo',
        hidden: true,
        component: () => import('@/views/clientInfo/index'),
        meta: { title: '客户信息', icon: 'icon-yejiguanli', keepAlive: true }
    }]
    export default new Router({
      mode: 'history',
      routes: constantRouterMap,
      scrollBehavior: () => ({ y: 0 })
    })

在页面中的路由容器里设置keep-alive标签

<template>
  <keep-alive v-if="$route.meta.keepAlive">
    <router-view/>
  </keep-alive>
  <router-view v-else-if="!$route.meta.keepAlive"/>
</template>
<script>
export default {
  name: 'List'
}
</script>

• 保留页面滚动位置
  首次进入页面时，scrollTop = 0，如上面所说，在设置keep-alive的页面，一定会走activated方法，当页面中存在滚动条，路由跳转的两个场景：
  • 离开列表页进入详情页（修改本页面的路由元信息scrollTop为当前滚动位置）
  • 离开列表页进入其他平级页面（修改本页面的路由元信息scrollTop为0）

const myMixin = {
  activated() {
    document.querySelector('#app').scrollTop = this.$route.meta.scrollTop
  },
  beforeRouteLeave(to, from, next) {
    if (to.name.includes('clientInfo')) {
      const scrollTop = document.querySelector('#app').scrollTop
      from.meta.scrollTop = scrollTop
    } else {
      from.meta.scrollTop = 0
    }
    next()
  }
}

页面中列表较多的情况下，我们把activated方法和beforeRouteLeave方法抽离出来复用，页面中引用进来即可：

import myMixin from '@/utils/mixin.js'
export default {
  name: 'List',
  mixins: [myMixin]
}

暂且总结这么多，希望对大家有帮助！