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

原文地址:https://www.cnblogs.com/dangdanghepingping/p/14993719.html