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

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

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

1. keep-alive的基础使用

最基础的一般是结合动态组件去使用：

<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 之前，大部分是这样实现的：

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