标签：缓存 实例 -- alive keep 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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。