1.简介

keep-alive是Vue的内置组件，当它包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和transition相似，keep-alive是一个抽象组件：它自身不会渲染成一个DOM元素，也不会出现在父组件链中。

作用：

在组件切换过程中将状态保留在内存中，防止重复渲染DOM，减少加载时间及性能消耗，提高用户体验性。

原理：

在created函数调用时将需要缓存的VNode节点保存this.cache中，在页面渲染时如果VNode的name符合缓存条件，则会从this.cache中取出之前缓存的VNode实例进行渲染（VNode：虚拟DOM，其实就是一个JS对象）。 当组件在keep-alive内被切换，它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。

//使用keep-alive直接包裹组件
<keep-alive>
    <component :is="view"></component>
</keep-alive> 

//注：<keep-alive> 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。


如果需要缓存整个项目，则如下设置(直接包裹根router-view即可)：
<keep-alive>
    <router-view> </router-view>
</keep-alive>

vue2.1.0 新增了include，exclude两个属性，允许组件有条件的缓存。二者都可以用逗号分隔字符串、正则表达式或一个数组来表示。

    <!-- 逗号分隔字符串 -->
    <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>

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

使用场景

使用原则：当我们在某些场景下不需要让页面重新加载时我们可以使用keepalive
比如当我们从首页–>列表页–>商品详情页–>再返回，这时候列表页应该是需要keep-alive

举个例子：

1. 直接使用命令 vue create hello-world 创建一个新的项目 几个文件稍微改动一下，主要看router 和view下面的两个home about 组件，在这两个路由组件进行跳转的时候，组件会销毁
   效果如下： 当我们尝试切换（已经填了数据的）组件的时候，destroyed()函数，组件销毁，里面的数据也没有了

2.## 使用keep-alive 缓存组件 当跳转组件的时候，能缓存之前的组件，不销毁

3.只需修改App.vue组件即可

<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </div>
    <keep-alive>
      <router-view />
    </keep-alive>
    
  </div>
</template>

keep-alive的参数有以下三种：

1. include: [String,RegExp,Array] 只有匹配到的组件才能进行缓存

<keep-alive include="home">
   <router-view />
</keep-alive>

2. exclude：[String,RegExp,Array] 匹配到的组件都不缓存

<keep-alive include="about">
   <router-view />
</keep-alive>

3. max： [String,Number] 数字，最多能缓存多少组件实例。在新实例创建之前，缓存中最近没有使用的实例会被销毁