keep-alive是Vue的内置组件，当它包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。
和transtion相似，keep-alive是一个抽象组件，自身不会渲染成一个DOM元素，也不会出现在父组件链中。
作用：
在组件切换过程中将状态保留在内存中，防止重复渲染DOM，减少加载时间及性能消耗，提高用户体验性。
原理：
- 在created时将需要缓存的虚拟DOM节点保存在this.cache中；
- 在render页面渲染时，如果虚拟DOM中的name符合缓存条件(可以用include、exclude控制)，则会从this.cache中取出之前缓存的实例进行渲染；
参数：
- include：可以是字符串或正则表达式，名称匹配的组件会被缓存；
- exclude：可以是字符串或正则表达式，名称不匹配的组件才会被缓存；
exclude优先级大于include。
- max：数字，最多可以缓存多少组件实例；
声明周期钩子：
被包含在keep-alive中创建的组件，会多出两个声明周期：activated和deactivated。
- activated：在组件被激活时调用。在组件第一次渲染时也被会调用，之后每次keep-alive激活时调用。
- deactivated：在组件被停用时调用。
当引入keep-alive后，组件第一次进入，钩子的触发顺序是：created->mounted-activated，退出时触发deactivated。当再次进入时，只触发activated。
<keep-alive include="test-keep-alive">
<!-- 将缓存name为test-keep-alive的组件 -->
<component></component>
</keep-alive>
动态组件：
让多个组件使用同一个挂载点，并动态切换，这就是动态组件。
挂载点就是标签。
通过使用保留的<component>元素，动态地绑定它的 is 特性，可以实现动态组件。
<div id="app">
<component is="one"></component>
</div>
new Vue({
el: '#app',
components: {
one: {template: '<div>我是线路一</div>'},
two: {template: '<div>我是线路二</div>'},
thr: {template: '<div>我是线路三</div>'}
}
})
