Vue 页面缓存keep-alive

1. keep-alive的基础使用

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

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

2. 生命周期钩子

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

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

deactivated 在组件被停用时调用。

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

3. 配合router-view使用

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

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

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

<!-- 逗号分隔字符串，只有组件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>
复制代码