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 中创建用户界面组件时,经常会提到可重用性,在 Vue 中创建真正的可重用组件可能很棘手,在本文中,我将探讨可重用组件的概念、应用这些组件时面临的问题,以及为什么必须尽可能克服这些问题,需要的朋友可以参考下2023-10-10
在Web开发中，有时候需要对网页进行截图或截屏，Vue作为一个流行的JavaScript框架，提供了一些工具和库，可以方便地实现网页截图和截屏功能，本文将介绍如何在Vue中进行网页截图和截屏,需要的朋友可以参考下2023-06-06
对于中小型企业,vue应用越来越多,学习vue相对于react的成本要低点,入门相对简单。这篇文章主要给大家介绍了关于Vue接口封装的相关资料,需要的朋友可以参考下2021-05-05
这篇文章主要介绍了vue data有值,但是页面{{}} 取不到值的解决，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11
这篇文章主要介绍了Vue中的作用域CSS和CSS模块的区别，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下2018-10-10
这篇文章主要介绍了Vue首页加载过慢的解决方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-08-08
这篇文章主要为大家介绍了Vite结合whistle实现一劳永逸开发环境代理方案，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-07-07
这篇文章主要介绍了ant-design-vue动态表格合并案例，文章围绕主题通过案例详解展开相关内容，具有一定的参考价值，需要的小伙伴可以参考一下2022-08-08
详解Vue-cli webpack移动端自动化构建rem问题
这篇文章主要介绍了详解Vue-cli webpack移动端自动化构建rem问题，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-04-04
本文主要介绍了vue中v-if失效原因及解决方法,一般v-if失效都是和绑定变量有关,下面就来具体介绍一下,感兴趣的可以了解一下2023-09-09
最新评论