Vue keep-alive 使用及缓存机制详解

前言在VUE项目中，有些组件或者页面没必要多次渲染，所以需要将部分组件有条件的在内存中进行"持久化",不过这里的持久化不是简单的数据持久化，而是整个组件（包括数据和视图）的持久化，刚好VUE提供了<keep-alive>这个内置组件来完成这件事情。<keep-alive> 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 <transition> 相似，<keep-alive> 是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在组件的父组件链中。当组件在 <keep-alive> 内被切换，它的 activated和 deactivated 这两个生命周期钩子函数将会被对应执行。
基本使用使用的时候分两个版本。在vue 2.1.0 之前，大部分是这样实现的：

[JavaScript] 纯文本查看 复制代码

?

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21

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

这样配置路由的路由元信息之后，a路由的$route.meta.keepAlive便为 true ，而b路由则为 false 。所以为 true 的将被包裹在 keep-alive 中，为 false 的则在外层。这样a路由便达到了被缓存的效果，如果还有想要缓存的路由，只需要在路由元中加入 keepAlive: true 即可。
在vue 2.1.0 版本之后，keep-alive 新加入了两个属性: include(包含的组件缓存生效) 与 exclude(排除的组件不缓存，优先级大于include) 。include 和 exclude 属性允许组件有条件地缓存。二者都可以用逗号分隔字符串、正则表达式或一个数组来表示。当使用正则或者是数组时，一定要使用 v-bind 。
简单使用：

[JavaScript] 纯文本查看 复制代码

?

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22

<!-- 逗号分隔字符串 --> <keep-alive include="a,b">   <component :is="view"></component> </keep-alive> <!-- 正则表达式 (使用 `v-bind`) --> <keep-alive :include="/a|b/">   <component :is="view"></component> </keep-alive> <!-- 数组 (使用 `v-bind`) --> <keep-alive :include="['a', 'b']">   <component :is="view"></component> </keep-alive> 配合router-view使用 <template>   <div id="app">     <transition :name="routerTransition">       <keep-alive :include="keepAliveComponentsData">         <router-view :key="$route.fullPath"></router-view>       </keep-alive>     </transition>   </div> </template>

推荐使用2.1.0以后的版本来做缓存策略，代码更加简洁，而且少了很多的重复渲染。
高级进阶使用我们了解了基本的使用，但是在日常项目中可没有想象的那么简单，所以需要设计一下整个项目的缓存策略，如何让所有组件可以动态的去切换