vue中使用keep-alive无效以及include 和 exclude用法

👨 作者简介：大家好，我是Taro，前端领域创作者
✒️ 个人主页：唐璜Taro
🚀 支持我：点赞👍+📝 评论 + ⭐️收藏

---

最近在修改我司一款医疗类CMS系统，采用的技术栈是 Vue2.x + Ant-Design-Vue ，用户提到了一个需求，希望在切换Tabs多页签时，能够在其他Tabs切换回来后，下方的分页器页码依然可以留在离开前的页数。

这里想到的是 使用 Vue中的 keep-alive，去包裹住 router-view，从而实现路由的缓存

就像这样：

<template>
  <div class="app-main">
    <keep-alive>
      <router-view />
    </keep-alive>
  </div>
</template>
1
2
3
4
5
6
7

简单讲一下 keep-alive

keep-alive 是 Vue 提供给开发者的一个全局组件，被包裹住的组件，可以保留初始的状态，避免被重新渲染。（通常和 router-view 配合使用 ）

开发者可以根据自己的需要，对想要或者不想要缓存的特定页面，进行缓存。如何实现呢？

上面说到了，keep-alive是组件，所以接收的是props，接受一个 include 和 exclude，

props

 - include - 字符串或正则表达，只有匹配的组件会被缓存

 - exclude - 字符串或正则表达式，任何匹配的组件都不会被缓存
 
1
2
3
4
5
6

不少初次上手keep-alive的，会发现被包裹的组件依然没有被缓存，为什莫会这样？

带着这份疑惑，我们看一下 官方大大怎么说的

匹配首先检查组件自身的 name 选项，若是 name 选项不可用，则匹配它的局部注册名称 (父组件 components
选项的键值)。匿名组件不能被匹配。

重点来了,这里的 name 不是 路由表中 meta 下的name，是局部组件中 export default 下的name

<script>
export default {
  name: 'AppMain',
}
</script>
1
2
3
4
5

我们通常会在路由表各个路由中 的 meta下 中 添加 是否缓存的标志位，下意识的认识是路由表的 name,
其实不然

{
   path: '/a',
   name: 'a',
   component: () => import('src/views/a'),
   meta: { keepAlive: true }
},
{
   path: '/b',
   name: 'a',
   component: () => import('src/views/b'),
   meta: { keepAlive: true }
}
1
2
3
4
5
6
7
8
9
10
11
12

使用中可能遇到的问题

当引入keep-alive 的时候，页面第一次进入，钩子的触发顺序created> mounted> activated
1

退出时触发deactivated。当再次进入（前进或者后退）时，只触发activated。
1

注意：我们知道 keep-alive
之后页面模板第一次初始化解析变成HTML片段后，再次进入就不在重新解析而是读取内存中的数据，即，只有当数据变化时，才使用VirtualDOM进行diff更新。有需要的话，页面进入的数据获取应该在activated中也放一份。数据下载完毕手动操作DOM的部分也应该在activated中执行才会生效。

所以，有需要的话，应该activated中留一份数据获取的代码，或者不要created部分，直接将created中的代码转移到activated中。