当前位置:主页 > vue.js教程 > vue的keep-alive用法技巧

vue的keep-alive实例用法

发布:2020-02-05 10:12:08 161


为网友们分享了vue相关的编程文章,网友丁高雅根据主题投稿了本篇教程内容,涉及到vue、keep-alive、vue的keep-alive用法技巧相关内容,已被707网友关注,相关难点技巧可以阅读下方的电子资料。

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,缓存部分页面)

vue的keep-alive用法技巧

vue的keep-alive用法技巧

vue的keep-alive用法技巧

缓存的页面 created 会执行只有一次,activated每次都会执行 , created 里面做 第一次 isFirstEnter = true(由于页面被缓存,所以一直生效),之后再activated 里面做判断 只有 “不是返回回来的” 和 “第一次进来的” 就刷新数据, 并且要在下面 都设为false, 以免缓存各标识不对,在进入 “列表页” 时,通过router钩子函数 beforeRouteEnter做判断,详情页过来的设 isBack 为true,即不刷新页面

以上就是全部相关知识点内容,感谢大家对码农之家的支持。


参考资料

相关文章

  • 详解Vue调用手机相机和相册以及上传

    发布:2022-06-18

    给大家整理了关于Vue的教程,这篇文章主要介绍了Vue调用手机相机及上传,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧


  • vue纯js监听滚动条到底部的知识点实例

    发布:2019-10-09

    今天小编就为大家分享一篇vue 纯js监听滚动条到底部的实例讲解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧


  • 总结vue spa应用中的路由缓存问题及解决办法

    发布:2020-02-10

    这篇文章主要介绍了vue spa应用中的路由缓存问题与解决方案,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习


  • 详解vue项目中使用AES实现密码加密解密(ECB和CBC两种模式)

    发布:2020-02-17

    这篇文章主要介绍了vue项目中使用AES实现密码加密解密的方法,主要是通过ecb和cbc两种模式,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下


  • 你了解vue3.0响应式数据怎么实现吗

    发布:2022-04-03

    这篇文章主要介绍了你了解vue3.0响应式数据怎么实现吗,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧


  • vue使用mui的弹出日期选择插件实例详解

    发布:2019-11-06

    今天小编就为大家分享一篇vue里面使用mui的弹出日期选择插件实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧


  • vue项目打包后通过百度的BAE发布到网上流程步骤

    发布:2019-08-02

    这篇文章主要介绍了将vue的项目打包后通过百度的BAE发布到网上的流程,主要运用的技术是vue+express+git+百度的应用引擎BAE。需要的朋友可以参考下


  • 使用Vue CLI创建typescript项目的方法

    使用Vue CLI创建typescript项目的方法

    发布:2023-01-10

    为网友们分享了关于Vue的教程,这篇文章主要介绍了使用Vue CLI创建typescript项目的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧


网友讨论