时间:2021-05-26
Vue中keep-alive的使用我总结的有两种方式应用:
首先简述一下keep-alive的作用,kee-alive可以缓存不活动的的组件。当组件之间进行相互切换的时候,默认会销毁,当重新切换回来时又重新初始化。现在有需求切换回来不销毁组件,保持原来的状态,此时用keep-alive就可以实现了
我创建了两个组件,可以相互切换
组件1:
组件2:
第一种方式
在组件1的路由中添加 meta: { keepAlive: true }, 也就是当前路由需要缓存
此时路由设置完毕,keep-alive代码可以结合v-if进行包裹,如果meta中的keepAlive为true进行缓存,否侧不进行缓存,这样可以更灵活一些。
此时组件被缓存,不会销毁,所以切换不会重新创建,自然也不会调用create等生命周期函数。不过我们可以用activated与deactivated来获取当前组件是否处于活动状态(类似钩子函数的用法)。
第二种方式
在keep-alive上有两个属性:
通过include设置
此时,也可以达到缓存keepAlive组件的目的。
以上是我初步总结的keep-alive的实现用法,不正之处烦请诸位指正。
到此这篇关于Vue中keep-alive的两种应用方式的文章就介绍到这了,更多相关Vue keep-alive内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持!
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
版权1、外层包围keep-alive作用将组件实例缓存下来2、清除组件缓存使用keep-alive的exclude="组件名"属性补充知识:vue简单的页面刷新
Vue工程中有些页面需要有缓存。这个功能通过keep-alive组件实现,keep-alive组件可以使被包含的组件保留状态,或避免重新渲染。 在rout
vue2.0keep-alive的最佳实践,供大家参考,具体内容如下1.基本用法vue2.0提供了一个keep-alive组件用来缓存组件,避免多次加载相应的组
keep-alive是Vue的内置组件,能在组件切换过程中将状态保留在内存中,防止重复渲染DOM。结合vue-router中使用,可以缓存某个view的整个内容
vue2.0提供了一个keep-alive组件用来缓存组件,避免多次加载相应的组件,减少性能消耗keep-aliv是Vue.js的一个内置组件。它能够不活动的组