Vue中keep-alive的两种应用方式
更新时间：2020年07月15日 09:52:00 作者：小羽羽
这篇文章主要介绍了Vue中keep-alive的两种应用方式，文中讲解非常细致，代码帮助大家更好的理解和学习，感兴趣的朋友可以了解下
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内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
许多朋友想要材料上传之后点击预览实现在浏览器上预览的效果,所以本文将给大家介绍如何使用vue实现pdf预览功能,文中有实现代码,有需要的朋友可以参考阅读下2023-08-08
这篇文章主要介绍了基于vue+echarts 数据可视化大屏展示的方法示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2020-03-03
这篇文章主要为大家详细介绍了pinia，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助2022-02-02
这篇文章主要为大家详细介绍了Vue实现步骤条效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-03-03
这篇文章主要介绍了vuex中五大属性和使用说明(包括辅助函数)，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-05-05
这篇文章主要介绍了vue-cli2.0转3.0之项目搭建的详细步骤，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-12-12
表单验证在很多地方都可以用的到，本文主要介绍了element自定义表单验证上传身份证正反面的实现，文中根据实例编码详细介绍的十分详尽，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-03-03
这篇文章主要介绍了若依VUE前端打包到测试环境,本文通过示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-12-12
在vue项目中(本地)使用iconfont字体图标的三种方式总结
这篇文章主要介绍了在vue项目中(本地)使用iconfont字体图标的三种方式总结，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
这篇文章主要介绍了Vue3.x最小原型系统讲解。既然用Vue3.0构建最小原型系统，那么肯定要用尤大的最新构建工具Vite来进行项目的初始化，下文举例说明,需要的朋友可以参考一下2022-02-02
最新评论