基于keep-alive的列表页缓存

keep-alive是什么？

keep-alive是一个抽象组件：它自身不会渲染一个DOM元素，也不会出现在父组件链中；使用keep-alive包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。

Props：

• include - 字符串或正则表达式。只有名称匹配的组件会被缓存。
• exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存。
• max - 数字。最多可以缓存多少组件实例。

用法：
当组件在 <keep-alive> 内被切换，它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。

<keep-alive> 不会在函数式组件中正常工作，因为它们没有缓存实例。

使用场景

本文讲以最常见的 列表页>详情页>列表页 需要保持上一次列表状态的情况为例讲解，这里主要用到了keep-alive的生命周期activated和sessionStorage。

推荐直接用include或者exclude方式，简洁高效。

1、首先给需要缓存的组件添加name属性，如下：

//列表页
export default {
  name: 'list',//组件的名字
  data() {
    return {}
  }
}

2、在组件关联的router-view上添加keep-alive，并加入include属性，填入我们的组件名list，如下：

//App主入口
<template>
    <keep-alive :include="keepAliveArr">
       <router-view></router-view>
    </keep-alive>
</template>
export default {
  name: 'App',
  data() {
    return {
      keepAliveArr: ['list'] //需要缓存的组件的名字（vue文件中的名字）
    }
  }
}

注：include和exclude接受字符串、数组和正则，我们可以根据项目需要自行添加需要/不需要缓存的组件名。

3、在缓存的组件中加入activated生命周期用来排除从其它页面进入的情况：

//列表页
export default {
  name: 'list',
  data() {
    return {}
  },
  activated() {
    if(!window.sessionStorage.getItem('needCache')) {
      this.getData(1, true); //非详情页进来需要请求数据
    } else {
      window.sessionStorage.removeItem('needCache') //及时清除
   }
 },
 methods: {
      goDetail() {
          window.sessionStorage.setItem('needCache', true); //进入关联页面前存个标识，可以使用 window.sessionStorage.removeItem('needCache') 移除标识
          this.$router.push({
            path: '/detail',
            query: {
                id: 'xxx'
            }          
          })
      }
  }
}

注意事项

1. include和exclude中是组件的名字，而不是路由的名字；
2. keep-alive必须加在组件直接关联的router-view上（有多个router-view的情况下要注意）。

😄提示：

最佳的解决办法是直接动态维护include数组来控制keepalive缓存，这样可以减少页面内部的额外逻辑。
我们可以用include结合vuex来实现缓存控制，简洁高效。