1、keep-alive
在组件来回切换时，为了避免组件重复渲染DOM节点导致的性能问题，将组件保存在内存中，被<keep-alive></keep-alive>标签包裹的组件，当包裹的组件中的数据不再变化时，就会被缓存。
注意点：
- 被包裹的组件在数据不变化时，是被缓存，而不是被销毁
- keep-alive标签不会在DOM树中渲染，也不会在父组件链中存在的，也就是说，不存在于this.$parents中。
- 被切换、包裹的组件要求都要有自己的名字，不论是通过组件的name选项还是局部/全局注册。组件匹配时首先检查组件自身的name选项，如果name选项不能用，则匹配他的局部注册名称（父组件components选项的键值）。所以匿名组件是不能被匹配的。
- 生命周期钩子：
缓存了的组件，再次进入组件不会触发beforeCreate、created、beforeMounted、mounted，如果想每次进入组件都执行某段逻辑，可以放在activated进入缓存组件的钩子中。同理：离开缓存组件的时候，beforeDestroy和destroyed并不会被触发，可以使用deactivated离开缓存组件的钩子来代替
-
多个条件判断的子组件，要求只有一个子元素被渲染，不可和v-for同用，如下
<keep-alive> <comp-a v-if="a > 1"></comp-a> <comp-b v-else></comp-b> </keep-alive>
Props：
include:字符串或正则表达式。只有名称匹配的组件会被缓存。（例：<keep-alive include='One'> 只有组件名为One的组件才会被缓存）。
exclude:字符串或正则表达式。所有名称匹配的组件都不会被缓存。（例：<keep-alive exclude='Two'> 组件名为Two的组件不会被缓存）。
max:数字，最多可缓存多少组件实例。一旦这个数字达到了，在新的实例被创建之前，已缓存组件中最久没有被访问的实例会被销毁掉。
<!-- 逗号分隔字符串 -->
<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>
<!-- 最大缓存数 (使用 `v-bind`) -->
<keep-alive :max="10">
<component :is="view"></component>
</keep-alive>2、component动态组件
使用vue的内置标签<component>,通过is标签属性来切换不同的组件
Props：
is:String
常用场合：在一个多标签界面中切换不同的组件（标签的位置需要渲染为那个组件）
<!-- 组件会在 `currentTabComponent` 改变时改变 -->
<component v-bind:is="currentTabComponent"></component>常与keep-alive搭配只用，具体使用根据需求而定。
本文借鉴网上找的资料，整合而成。