vue之keep-alive(加深印象)

定义：

包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们

生命周期：

activated：当 keepalive 包含的组件再次渲染的时候触发

deactivated： 当 keepalive 包含的组件销毁的时候触发

参数

include 包含的组件(可以为字符串，数组，以及正则表达式,只有匹配的组件会被缓存)

exclude 排除的组件(以为字符串，数组，以及正则表达式,任何匹配的组件都不会被缓存)

max 缓存组件的最大值(类型为字符或者数字,可以控制缓存组件的个数)

//缓存name名称为list和table的组件
<keep-alive include="list,table">
  <component></component>
</keep-alive>


//不缓存name名称为list和table的组件
<keep-alive exclude="list,table">
  <component></component>
</keep-alive>

<!-- 如果同时使用include,exclude,那么exclude优先于include， 下面的例子只缓存a组件 -->
<keep-alive include="list,exclude" exclude="exclude"> 
  <component></component>
</keep-alive>


<!-- 如果缓存的组件超过了max设定的值10，那么将删除第一个缓存的组件 -->
<keep-alive  max="10"> 
  <component></component>
</keep-alive>