侧边栏壁纸
博主头像
M酷博主等级

一帆风顺 ⛵️⛵️⛵️

  • 累计撰写 42 篇文章
  • 累计创建 37 个标签
  • 累计收到 351 条评论

目 录CONTENT

文章目录

基于keep-alive的列表页缓存

M酷
2021-01-06 / 2 评论 / 5 点赞 / 1,272 阅读 / 1,740 字 / 正在检测是否收录...

keep-alive是什么?

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

Props:

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

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

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

使用场景

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

推荐直接用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来实现缓存控制,简洁高效。

5
广告 广告

评论区