keep-alive 是 vue 的内置组件，而这个组件的作用就是能够缓存不活动的组件。一般情况下，组件进行切换的时候，默认是会进行销毁的，如果我们有需求，在某个组件切换后不进行销毁，而是保存之前的状态，那么就可以利用 keep-alive 来实现。

在 keep-alive 上有两个属性，可以对字符串或正则表达式进行匹配，匹配到的组件会被缓存。

• include 值为字符串或者正则表达式匹配的组件 name 会被缓存。（缓存匹配到的组件）
• exclude 值为字符串或正则表达式匹配的组件 name 不会被缓存。（排除匹配到的组件）

其拥有两个独立的生命周期钩子函数 actived 和 deactived，使用 keep-alive 包裹的组件在切换时不会被销毁，而是缓存到内存中并执行 deactived 钩子函数，命中缓存渲染后会执行 actived 钩子函数。

每个vue实例在被创建时都要经过一系列的初始化过程。
所有的生命周期钩子自动绑定 this 上下文到实例中，因此可以在函数中访问数据，对属性和方法进行运算。这意味着不能使用箭头函数来定义一个生命周期方法【这是因为箭头函数绑定了父上下文，因此this与你期待的 Vue 实例不同】。

vue的生命周期图：

阶段一：Vue实例创建阶段

• beforeCreate
  Vue实例在内存中刚被创建，this 变量还不能使用，数据对象（data）和方法（methods）未初始化，watcher 中的事件都不能获得到；

• created
  实例已经在内存中创建好，数据和方法已经初始化完成，但是模板还未编译，页面还是没有内容，还不能对 dom 节点进行操作（此时访问 this.$el 和 this.$refs.xxx 都是 undefined）

• beforeMounte
  找到对应的 template 模板，编译成 render 函数，转换成虚拟 dom，此时模板已经编译完成，数据未挂载到页面，也就是说在这个阶段你可以看到标签间的双花括号，数据还未渲染到页面中；

• render : h=>h(App)
  在 beforeMounte 之后和 mounted 之前，还有渲染 render 函数，它的作用是把模板渲染成虚拟 dom。

• mounted
  模板编译好了，虚拟 dom 渲染成真正的 dom 标签，数据渲染到页面，此时Vue实例已经创建完毕，如果没有其他操作的话，Vue实例会静静的躺在内存中，一动不动。
  一般会在 mounted 中来渲染从后端获取的数据。(页面初始化时，如果有操作 dom 的事件一般也会放在 mounted 钩子函数中。当然，也可以放在 create 中，前提需使用 this.$nextTick(function(){})，在回调函数中操作dom。)

阶段二：Vue实例运行阶段

• beforeUpdate
  数据依赖改变或者用 $forceUpdata 强制刷新时，对象 data 中的数据已经更改（虚拟 dom 已经重新渲染），但是 页面中的值还是原来，未改变，因为此时还未开始渲染 dom；

• update
  此时 data 中的数据和页面更新完毕，页面已经被重新渲染。

在实际开发中，一般会用监听器 watch 来代替上边2个方法，因为 watch 会知道是哪一个数据变化。

阶段三：Vue实例销毁阶段

• beforeDestroy
  实例销毁前使用，在此刻实例还是可用的。

• destroyed
  Vue实例被销毁，观察者、子组件、事件监听被清除（页面数据不会消失，只不过是响应式无效了）。

持续更新中。。。