当前位置:首页 > vue技术文章 > vue的keep-alive用法技巧

vue的keep-alive实例用法

  • 发布时间:
  • 作者:码农之家原创
  • 点击:161

这篇文章主要知识点是关于vue、keep-alive、的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下电子书

Vue.js快速入门
  • 类型:Web前端大小:186.6 MB格式:PDF作者:申思维
立即下载

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,即不刷新页面

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

以上就是本次给大家分享的关于java的全部知识点内容总结,大家还可以在下方相关文章里找到相关文章进一步学习,感谢大家的阅读和支持。

推荐内容

idea2020注册激活码(激活到2100年)

实例分析Java实现的zip压缩及解压缩工具类

python3 pandas 如何读取MySQL数据和插入

ThinkPHP3.2.3框架如何实现分页功能

深入理解JS函数stack size计算方法

展开 +

收起 -

vue 相关电子书
学习笔记
网友NO.483957

vue里如何主动销毁keep-alive缓存的组件

问题产生的背景 我们一个后台,在切换一些标签页的时候,是使用的 keep-alive 缓存的标签页,也使用了 include 属性来决定哪个页面进行缓存,而标签页的切换实际上是路由的切换,也就是说打开一个新标签页的时候,url 会跟着变化,老的标签页如果在 keep-alive 的 include 范围内那就会缓存下来。 然后客服人员就反馈页面开的久了就会崩溃,因为他们基础上不会刷新页面(工作需要),又总有切换标签的习惯,最后导致内存越来越大最后崩溃。 依赖环境 这个项目是基于一个开源 vue 后台框架: https://github.com/PanJiaChen/vue-element-admin ,然后代码一直由几个后端开发维护的!所以后端没找出问题在哪,然后就我来接手这个问题了。 写文章时,标签里竟然没有 vue 这一项,差评! 定位问题 先梳理下业务逻辑:从业务场景来说,我们在标签页之间切换时,如果……

网友NO.354498

vue使用keep-alive保持滚动条位置的实现方法

前言 下班前,20分钟,发一篇。。。 简单介绍,使用keep-alive的时候,返回前一页,没有保持滚动条位置。 事实上,就算不使用keep-alive,位置也没有被记录。 但是,在不适用keep-alive的时候,页面内容会刷新,所以就随他去了……就是这么任性…… 思路 官方有推荐一个scrollBehavior,链接,但是上面标注,只在history.pushState的浏览器生效,不知道是不是只能开启history.pushState才可以使用,看了下实现,挺不友好的,还是自己搞一个吧。。。 实现思路是这样的,首先给路由增加一个对象meta: meta: { keepAlive: true, scrollTop: 0,} keepAlive是否需要保持页面,scrollTop记录页面的滚动位置。 然后在app.vue增加如下入口: keep-alive router-view v-if="$route.meta.keepAlive"/router-view/keep-aliverouter-view v-if="!$route.meta.keepAlive"/router-view 这样就启用keep-alive了。 然后在全局main.ts增加一个全局……

网友NO.604995

解决vue keep-alive 数据更新的问题

在项目中使用keep-alive包含router-view实现页面缓存,加速页面加载, 同时,这种方式带来一些弊端,请看如下大神解释: *********************************** 当引入keep-alive的时候,页面第一次进入,钩子的触发顺序created- mounted- activated,退出时触发deactivated。 当再次进入(前进或者后退)时,只触发activated。 *********************************** 这就带来一个问题,之前在项目中使用mounted在页面加载时获取数据,使用keep-alive后方法不再生效, 根据上面的解释,将mounted替换为activated即可。 以上这篇解决vue keep-alive 数据更新的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持码农之家。 ……

网友NO.592044

详解关于Vue2.0路由开启keep-alive时需要注意的地方

Vue2.0 做应用必有的需求就是页面数据需要做缓存,不用每次进入页面都要把数据重新请求一遍,每次页面切换都有段等待数据相应时间,这个用户体验可想有多么蛋疼,所以页面缓存是必要的,啥时候需要更新页面数据呢?可以监听状态变化,或者是手动下拉刷新重新请求数据,酱紫,我想用户体验会做的更好。 keep-alive的作用以及好处 在做电商有关的项目中,当我们第一次进入列表页需要请求一下数据,当我从列表页进入详情页,详情页不缓存也需要请求下数据,然后返回列表页,这时候我们使用keep-alive来缓存组件,防止二次渲染,这样会大大的节省性能。 废话不多说直接上码,一般是在 src/App.vue 设置开启 keep-alive 实现页面数据缓存: template keep-alive router-view/router-view /keep-alive/template 列举几个常用的 hook 方法,如下: export default { data() { return……

网友NO.398575

vue2中的keep-alive使用总结及注意事项

keep-alive 是Vue的内置组件,能在组件切换过程中将状态保留在内存中,防止重复渲染DOM。结合vue-router中使用,可以缓存某个view的整个内容。 基本使用如下: keep-alive component !-- 该组件将被缓存! -- /component/keep-alive 一般有这样的需求,当我们第一次进入列表页需要请求一下数据,当我从列表页进入详情页,详情页不缓存也需要请求下数据,然后返回列表页 有两个情况: 1. 直接点击浏览器的后退返回按钮。 2. 点击导航栏中的 /list的链接返回。 那么针对第一种情况下,我们直接通过后退按钮时,返回到列表页(/list) 是不需要请求数据。 针对第二种情况下,我们通过链接返回到列表页是需要请求数据。 所以这边有三种情况: 1. 默认进来列表页需要请求数据。 2. 进入详情页后,通过浏览器默认后退按钮返回,是不需要ajax的请求的。 3. 进入详情页后,通……

<
1
>

电子书 编程教程 文档 软件 源码 视频

Copyright 2018-2020 xz577.com 码农之家

本站所有电子书资源不再提供下载地址,只分享来路

免责声明:网站所有作品均由会员网上搜集共同更新,仅供读者预览及学习交流使用,下载后请24小时内删除

版权投诉 / 书籍推广 / 赞助:QQ:520161757