深刻理解与使用keep-alive(配合router-view缓存整个路由页面)

在搭建 vue 项目时，有某些组件不必屡次渲染，因此须要将组件在内存中进行‘持久化'，此时 <keep-alive> 即可以派上用场了。 <keep-alive> 可使被包含的组件状态维持不变，即使是组件切换了，其内的状态依旧维持在内存之中。在下一次显示时，也不会重现渲染。

PS：<keep-alive> 与 <transition>类似，只是一个抽象组件，它不会在DOM树中渲染(真实或者虚拟都不会)，也不在父组件链中存在，好比：你永远在 this.$parent 中找不到 keep-alive 。

1. keep-alive的基础使用

最基础的通常是结合动态组件去使用：

?

1 2 3 4 5 6 7 8 9 10 11 12

<keep-alive>    <component :is= "currentView" ></component> </keep-alive>   new Vue({    el: '#app' ,    data(){      return {        currentView: Test //Test为引入的子组件      }    } })

不过此种方式并没有太大的实用意义。

2. 生命周期钩子

前端精品教程：百度网盘下载

被包含在 <keep-alive> 中建立的组件，会多出两个生命周期的钩子: activated 与 deactivated

activated

在组件被激活时调用，在组件第一次渲染时也会被调用，以后每次keep-alive激活时被调用。

deactivated

在组件被停用时调用。

注意：只有组件被 keep-alive 包裹时，这两个生命周期才会被调用，若是做为正常组件使用，是不会被调用，以及在 2.1.0 版本以后，使用 exclude 排除以后，就算被包裹在 keep-alive 中，这两个钩子依然不会被调用！另外在服务端渲染时此钩子也不会被调用的。

3. 配合router-view使用

有些时候可能须要将整个路由页面一切缓存下来，也就是将 <router-view> 进行缓存。这种使用场景仍是蛮多的。

在vue 2.1.0 以前，大部分是这样实现的：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

<!-- template --> <keep-alive>    <router-view v- if = "$router.meta.keepAlive" ></router-view> </keep-alive> <router-view v- if = "!$router.meta.keepAlive" ></router-view>   //router配置 new Router({    routes: [      {        name: 'a' ,        path: '/a' ,        component: A,        meta: {          keepAlive: true        }      },      {        name: 'b' ,        path: '/b' ,        component: B      }    ] })

这样配置路由的路由元信息以后，a路由的 $router.meta.keepAlive 便为 true ，而b路由则为 false 。
因此为 true 的将被包裹在 keep-alive 中，为 false 的则在外层。这样a路由便达到了被缓存的效果，若是还有想要缓存的路由，只须要在路由元中加入 keepAlive: true 便可。

4. 在2.1.0版本以后

前端精品教程：百度网盘下载

在vue 2.1.0 版本以后，keep-alive 新加入了两个属性: include(包含的组件缓存生效) 与 exclude(排除的组件不缓存，优先级大于include) 。

include 和 exclude 属性容许组件有条件地缓存。两者均可以用逗号分隔字符串、正则表达式或一个数组来表示。
当使用正则或者是数组时，必定要使用 v-bind !

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14

<!-- 逗号分隔字符串，只有组件a与b被缓存。这样使用场景变得更有意义了 --> <keep-alive include= "a,b" >   <component :is= "view" ></component> </keep-alive>   <!-- 正则表达式 (须要使用 v-bind，符合匹配规则的都会被缓存) --> <keep-alive :include= "/a|b/" >   <component :is= "view" ></component> </keep-alive>   <!-- Array (须要使用 v-bind，被包含的都会被缓存) --> <keep-alive :include= "['a', 'b']" >   <component :is= "view" ></component> </keep-alive>

有了include以后，再与 router-view 一块儿使用时便方便许多了:

?

1 2 3 4

<!-- 一个include解决了，不须要多写一个标签，也不须要在路由元中添加keepAlive了 --> <keep-alive include= 'a' >    <router-view></router-view> </keeo-alive>

5. 须要注意的地方

前端精品教程：百度网盘下载

• <keep-alive> 先匹配被包含组件的 name 字段，若是 name 不可用，则匹配当前组件 componetns 配置中的注册名称。
• <keep-alive> 不会在函数式组件中正常工做，由于它们没有缓存实例。
• 当匹配条件同时在 include 与 exclude 存在时，以 exclude 优先级最高(当前vue 2.4.2 version)。好比：包含于排除同时匹配到了组件A，那组件A不会被缓存。
• 包含在 <keep-alive> 中，但符合 exclude ，不会调用activated 和 deactivated。