keep-alive定义：
keep-alive是Vue.js的一个内置组件。它能够不活动的组件实例保存在内存中，而不是直接将其销毁，它是一个抽象组件，不会被渲染到真实DOM中，也不会出现在父组件链中。

它提供了include与exclude两个属性，允许组件有条件地进行缓存。

使用用法

<keep-alive>
    <component>此处标签是开发者自定义的组件</component>
</keep-alive>

这里的component组件会被缓存起来。

举个栗子

<keep-alive>
    <coma v-if="test"></coma>
    <comb v-else></comb>
</keep-alive>
<button @click="test=handleClick">请点击</button>

export default {
    data () {
        return {
            test: true
        }
    },
    methods: {
        handleClick () {
            this.test = !this.test;
        }
    }
}

在点击button时候，coma与comb两个组件会发生切换，但是这时候这两个组件的状态会被缓存起来，比如说coma与comb组件中都有一个input标签，那么input标签中的内容不会因为组件的切换而消失。

props
keep-alive组件提供了include与exclude两个属性来允许组件有条件地进行缓存，二者都可以用逗号分隔字符串、正则表达式或一个数组来表示。
include: 字符串或正则表达式。只有匹配的组件会被缓存。
exclude: 字符串或正则表达式。任何匹配的组件都不会被缓存。

keep-alive的声明周期执行
页面第一次进入，钩子的触发顺序
created-> mounted-> activated，退出时触发 deactivated
当再次进入（前进或者后退）时，只触发 activated
事件挂载的方法等，只执行一次的放在 mounted 中；组件每次进去执行的方法放在 activated 中；

<keep-alive include="a">
  <component></component>
</keep-alive>

将缓存name为a的组件。

<keep-alive exclude="a">
  <component></component>
</keep-alive>

name为a的组件将不会被缓存。
注意：此处的name值是与在名称为component组件中的name值对应的。

生命钩子
keep-alive提供了两个生命钩子，分别是activated与deactivated。

被keepalive包含的组件不会被再次初始化，也就意味着不会重走生命周期函数
但是有时候是希望我们缓存的组件可以能够再次进行渲染，这时 Vue 为我们解决了这个问题
被包含在 keep-alive 中创建的组件，会多出两个生命周期的钩子: activated 与 deactivated：
activated 当 keepalive 包含的组件再次渲染的时候触发
deactivated 当 keepalive 包含的组件销毁的时候触发
keep-alive是一个抽象的组件，keep-alive会将组件保存在内存中，并不会销毁以及重新创建，所以不会重新调用组件的created等方法，缓存的组件不会被 mounted,为此需要用activated与deactivated这两个生命钩子来得知当前组件是否处于活动状态。

参数理解

keep-alive 可以接收3个属性做为参数进行匹配对应的组件进行缓存:

include 包含的组件(可以为字符串，数组，以及正则表达式,只有匹配的组件会被缓存)
exclude 排除的组件(以为字符串，数组，以及正则表达式,任何匹配的组件都不会被缓存)
max 缓存组件的最大值(类型为字符或者数字,可以控制缓存组件的个数)
注：当使用正则表达式或者数组时，一定要使用 v-bind

<!-- 将（只）缓存组件name为a或者b的组件, 结合动态组件使用 -->
<keep-alive include="a,b">
 <component></component>
</keep-alive>

<!-- 组件name为c的组件不缓存(可以保留它的状态或避免重新渲染) -->
<keep-alive exclude="c"> 
 <component></component>
</keep-alive>

<!-- 使用正则表达式，需使用v-bind -->
<keep-alive :include="/a|b/">
 <component :is="view"></component>
</keep-alive>

<!-- 动态判断 -->
<keep-alive :include="includedComponents">
 <router-view></router-view>
</keep-alive>

<!-- 如果同时使用include,exclude,那么exclude优先于include， 下面的例子只缓存a组件 -->
<keep-alive include="a,b" exclude="b"> 
 <component></component>
</keep-alive>

<!-- 如果缓存的组件超过了max设定的值5，那么将删除第一个缓存的组件 -->
<keep-alive exclude="c" max="5"> 
 <component></component>
</keep-alive>

遇见 vue-router 结合router使用，缓存部分页面

所有路径下的视图组件都会被缓存

<keep-alive>
  <router-view>
    <!-- 所有路径匹配到的视图组件都会被缓存！ -->
  </router-view>
</keep-alive>

如果只想要router-view里面的某个组件被缓存，怎么办？
1、使用 include/exclude
2、使用 meta 属性

方法1、用 include (exclude例子类似)

缺点：需要知道组件的 name，项目复杂的时候不是很好的选择

<keep-alive include="a">
  <router-view>
    <!-- 只有路径匹配到的 include 为 a 组件会被缓存 -->
  </router-view>
</keep-alive>

方法2、使用 meta 属性

优点：不需要例举出需要被缓存组件名称

使用$route.meta的keepAlive属性：

<keep-alive>
  <router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>

需要在router中设置router的元信息meta：

//...router.js
export default new Router({
 routes: [
  {
   path: '/',
   name: 'Hello',
   component: Hello,
   meta: {
    keepAlive: false // 不需要缓存
   }
  },
  {
   path: '/page1',
   name: 'Page1',
   component: Page1,
   meta: {
    keepAlive: true // 需要被缓存
   }
  }
 ]
})

深入keep-alive组件实现

说完了keep-alive组件的使用，我们从源码角度看一下keep-alive组件究竟是如何实现组件的缓存的呢？

created与destroyed钩子

created钩子会创建一个cache对象，用来作为缓存容器，保存vnode节点。

created () {
    /* 缓存对象 */
    this.cache = Object.create(null)
},

destroyed钩子则在组件被销毁的时候清除cache缓存中的所有组件实例。

/* destroyed钩子中销毁所有cache中的组件实例 */
destroyed () {
    for (const key in this.cache) {
        pruneCacheEntry(this.cache[key])
    }
},

【拓展一下】使用 router.meta 拓展

假设这里有 3 个路由： A、B、C。

需求如下：
默认显示 A
B 跳到 A，A 不刷新
C 跳到 A，A 刷新

实现方式如下：
在 A 路由里面设置 meta 属性：

{
    path: '/',
    name: 'A',
    component: A,
    meta: {
      keepAlive: true // 需要被缓存
    }
}

在 B 组件里面设置 beforeRouteLeave：

export default {
    data() {
      return {};
    },
    methods: {},
    beforeRouteLeave(to, from, next) {
       // 设置下一个路由的 meta
      to.meta.keepAlive = true; // 让 A 缓存，即不刷新
      next();
    }
};

在 C 组件里面设置 beforeRouteLeave：

export default {
    data() {
      return {};
    },
    methods: {},
    beforeRouteLeave(to, from, next) {
      // 设置下一个路由的 meta
      to.meta.keepAlive = false; // 让 A 不缓存，即刷新
      next();
    }
};

这样便能实现 B 回到 A，A 不刷新；而 C 回到 A 则刷新。

防坑指南
1.keep-alive 先匹配被包含组件的 name 字段，如果 name 不可用，则匹配当前组件 components 配置中的注册名称。
2.keep-alive 不会在函数式组件中正常工作，因为它们没有缓存实例。
3.当匹配条件同时在 include 与 exclude 存在时，以 exclude 优先级最高(当前vue 2.4.2 version)。比如：包含于排除同时匹配到了组件A，那组件A不会被缓存。
4.包含在 keep-alive 中，但符合 exclude ，不会调用 activated 和 deactivated。

keep-alive生命周期钩子函数：activated、deactivated
使用<keep-alive>会将数据保留在内存中，如果要在每次进入页面的时候获取最新的数据，需要在activated阶段获取数据，承担原来created钩子中获取数据的任务。

附录，题外话
生命周期函数：就是vue在某个时间段会自动执行的函数

1、beforeCreate(){}在执行的时候，data还有methods都没有被初始化。
2、created(){} data还有methods都被初始化好了，如果要调用 methods 方法或者操作 data 里面的数据，最早只能在 created 里面进行操作。
3、beforeMount(){} 表示模板已经在内存中编辑完成了，但是尚未渲染到模板页面中。即页面中的元素，没有被真正的替换过来，只是之前写的一些模板字符串。
4、mounted(){} 表示内存中模板已经真实的挂载到页面中去了，用户可以看到渲染好的界面了
注意这是一个生命周期函数的最后一个函数了，执行完这个函数表示 整个vue实例已经初始化完成了，组件脱离了创建阶段，进入运行阶段。

下面是运行期间的两个生命周期函数的钩子：
5、beforeUpdate(){} 表示我们的界面还没更新 但是data里面的数据是最新的。即页面尚未和最新的data里面的数据保持同步。
6、update(){} 表示页面和data里面的数据已经包吃同步了 都是最新的。
7、beforeDestory(){} 当执行这个生命周期钩子的时候 vue的实例从运行阶段进入销毁阶段 此时实例身上的data 还有 methods处于可用的状态。
8、Destoryed(){} 表示组件已经完全被销毁了 组件中所有的实例方法都是不能用了