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

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

最近在修改我司一款医疗类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>

简单讲一下 keep-alive

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

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

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

props

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

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

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

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

重点来了~

这里的 name 不是 路由表中 meta 下的name，是局部组件中 export default 下的name

<script>
export default {
  name: 'AppMain',
}
</script>

我们通常会在路由表各个路由中 的 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 }
}

使用中可能遇到的问题

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

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

注意：

我们知道 keep-alive之后页面模板第一次初始化解析变成HTML片段后，再次进入就不在重新解析而是读取内存中的数据，即，只有当数据变化时，才使用VirtualDOM进行diff更新。

有需要的话，页面进入的数据获取应该在activated中也放一份。数据下载完毕手动操作DOM的部分也应该在activated中执行才会生效。

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

keep-alive include和exclude无效问题及踩坑

• include：使该标签作用于所有name属性的值跟此标签 include的属性值一致的vue页面
• exclude：使该标签不作用于所有name属性的值跟此标签 exclude的属性值一致的vue页面

然后我就掉进坑里了，配置了一堆路由的name！！！！！无效！！！

使用include/exclude 属性需要给所有vue类的name赋值（注意不是给route的name赋值），否则 include/exclude不生效

正确写法是

export default {
 name:'a', // include 或 exclude所使用的name
 data () {
 return{
    }
  },
}

路由

   // 保持 name为a和b的组件
   <keep-alive include="a,b">
        <router-view/>
   </keep-alive>

vue2.0版本后，keep-alive内置组件已经封装了两个属性，include和exclude表示那些组件需要缓存那些组件不需要缓存，用法大致如下：

<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>

另外：

activated,deactivated这两个生命周期函数一定是要在使用了keep-alive组件后才会有的，否则则不存在

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

最新评论