vue中的keep-alive

vue中的内置组件:

<component :is='xx'></component>: 用来动态生成元素或组件的

<transition>

keep-alive: 组件切换时候，用内存来换取效率，空间换取事件，像路由切换，避免创建带来的开销，保存组件的状态.

　　keep-alive的内容仅限于组件，对普通元素没有作用，经过我测试，普通元素在keepalive中不被渲染

　　属性：include exclude='/组件的name/'；正则或数组都可以。

  <keep-alive :include="/a/"> //组件的名称中有a的组件
    <component :is="comps[index]" />
  </keep-alive>

备注：组件的名称 获取的方法$options.name; 用途：组件递归和compnent缓存

https://cn.vuejs.org/v2/api/#keep-alive

原理：改变render函数返回keep-alive插槽中用的vnode

　　1.获取keep-alive插槽的vnode

　　2.获取组件名称（用key，key是用户自定义或则是default）

　　3：每个名称对应一个vnode

　　4.判断是否缓存过：没有则缓存，有则重用组件实例

 

https://www.jianshu.com/p/9523bb439950