vue的keep-alive用法技巧
更新时间：2019年08月15日 08:34:54 作者：寻易之客
在本篇文章里小编给大家整理的是关于vue的keep-alive用法技巧以及实例代码，需要的朋友们学习下。
<keep-alive>是Vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM
<keep-alive> 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 <transition> 相似，<keep-alive>是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在父组件链中。
方法1
include: 字符串或正则表达式。只有匹配的组件会被缓存。
exclude: 字符串或正则表达式。任何匹配的组件都不会被缓存。
exclude优先级大于include
<keep-alive include="a,b"> <!-- 将缓存name为a或者b的组件，结合动态组件使用 --> <component :is="view"></component> </keep-alive>
方法2 （结合berforeRouteEnter，缓存部分页面）
缓存的页面 created 会执行只有一次，activated每次都会执行 ， created 里面做 第一次 isFirstEnter = true(由于页面被缓存，所以一直生效)，之后再activated 里面做判断 只有 “不是返回回来的” 和 “第一次进来的” 就刷新数据， 并且要在下面 都设为false, 以免缓存各标识不对，在进入 “列表页” 时，通过router钩子函数 beforeRouteEnter做判断，详情页过来的设 isBack 为true,即不刷新页面
以上就是全部相关知识点内容，感谢大家对脚本之家的支持。
相关文章
这篇文章主要介绍了详解vue项目接入微信JSSDK的坑,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-12-12
element-ui中导航组件menu的一个属性:default-active说明
这篇文章主要介绍了element-ui中导航组件menu的一个属性:default-active说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-05-05
本文主要介绍了vue使用npm发布自己的公网包,通过创建一个简单的npm包,本文详细阐述了从创建到发布的整个过程,具有一定的参考价值,感兴趣的可以了解一下2023-08-08
本文主要介绍了vue+antDesign实现树形数据展示及勾选联动，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-02-02
这篇文章主要介绍了vue build错误异常的解决方法 ，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下2019-04-04
本文介绍了三种使用Vue实现动态数字动画的方案：使用Vue的响应式数据与`setInterval`逐步更新数字,通过Vue的动画API和CSS动画效果为数字增加过渡效果,以及使用更高效的`requestAnimationFrame`来提供更加流畅的动画表现,每种方案都详细说明了原理、实现步骤和代码示例2025-02-02
在vue3版本中，引入了一个新的函数，叫做setup，引入他的原因总结一下主要原因是：为了使用组合式 API，setup函数是Composition 的入口。本文将详细介绍一下Vue3中setup函数的使用教程，感兴趣的可以了解一下2022-07-07
这篇文章主要介绍了vue关于锚点定位、跳转到指定位置实现方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-04-04
这篇文章主要介绍了浅谈Vue路由快照实现思路及其问题，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-06-06
这篇文章主要介绍了Vue使用Vuex一步步封装并使用store全过程，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-01-01
最新评论