Vue-缓存组件

缓存组件

　　<keep-alive>是Vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。
　　<keep-alive> 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。
　　<keep-alive> 与 <transition>相似，只是一个抽象组件，它不会在DOM树中渲染(真实或者虚拟都不会)，也不在父组件链中存在，比如：你永远在 this.$parent 中找不到 keep-alive 。
　　而且被包含在keep-alive中的组件会多出来两个生命周期函数：

　　activated: 在keep-alive组件激活时调用，进入被keep-alive包裹的组件时触发
　　deactivated:在keep-alive组件离开时都调用

使用方法：

<keep-alive>
			<component v-bind:is="mytemp"></component>
</keep-alive>

　　在keep-alive中有三个属性需要知道

　　　　include 哪些缓存 可以写组件名字符串 也可以写正则

<keep-alive :include="/Box1|Box2/">
			<component v-bind:is="mytemp"></component>
		</keep-alive> -->

　　　　exinclude 哪些不缓存

<keep-alive exclude="Box3">
			<component v-bind:is="mytemp"></component>
		</keep-alive> -->

　　　　max 最缓存几个

<keep-alive :max="2">
			<component v-bind:is="mytemp"></component>
		</keep-alive> -->

　　注意：最多可以缓存多少组件实例。一旦这个数字达到了，在新实例被创建之前，已缓存组件中最久没有被访问的实例会被销毁掉。

标签：缓存,实例,--,alive,keep,Vue,组件
来源： https://www.cnblogs.com/forever-ljf/p/16687524.html