关于vue2.0 使用keep-alive导致切换新组建时，旧组件被重新渲染一次的问题总结

已于 2022-08-23 11:44:09 修改
阅读量1.2k 收藏
点赞数
分类专栏： JavScript element-ui vue 文章标签： javascript 前端 html
于 2022-08-22 09:44:49 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/csdn6107/article/details/126459773
版权

Vue2.0 keep-alive 组件复渲染 activated生命周期 性能优化
关键词由CSDN通过智能技术生成
element-ui 同时被 3 个专栏收录
10 篇文章 1 订阅
订阅专栏
vue
8 篇文章 0 订阅
订阅专栏
JavScript
3 篇文章 0 订阅
订阅专栏

关于vue2.0 使用keep-alive导致切换新组建时，旧组件被重新渲染一次的问题总结

       本人对keep-alive机制并不熟悉，发现在使用过程中，发现旧组件切换至新组件时，旧组件会被重新渲染一次，包括created、mounted生命周期都会被重新执行一次，如需解决此问题，应把需要首次执行渲染的内容放到keep-alive特有的生命周期钩子activated(组件激活调用)中。

解决方案：使用activited钩子代替以上两个生命周期钩子
代码如下：
       created() { },
       mounted() { },
       activated() { },

RonnieFeng
关注
专栏目录
vue路由缓存的三种方式
weixin_43183219的博客
06-17 6491
vue路由的三种缓存方式，全部缓存，指定单个缓存，多个缓存
Vue组件强制刷新（重新渲染）
weixin_46504400的博客
03-26 2112
如果是刷新某个子组件，则可以通过v-if指令实现。我们知道，当v-if的值发生变化时，组件都会被重新渲染一遍。因此，利用v-if指令的特性，可以达到强制刷新组件的目的。遇到的问题是父组件向子组件传值，父组件的值是从接口来的是异步的，然后传给子组件时子组件接收不到，可能因为父子生命周期的原因，原理很简单，vue使用key标记组件身份，当key改变时就是释放原始组件，重新加载新的组件。组件内置$forceUpdate方法，使用前需要在配置中启用。四、key-changing。二、使用v-if标记。
前端面试题- 如何让vue页面重新渲染
最新发布
m0_62300955的博客
08-05 409
前端面试题- 如何让vue页面重新渲染
Vue 后台管理项目中使用keep-alive防止也没每次打开都重载，影响使用体验
haeasringnar的博客
03-31 1161
1、修改AppMain.vue 将 加载组件的地方，使用keep-alive包含起来 ...... <keep-alive> <router-view/> </keep-alive> ...... 2、修改具体的业务代码 假设有一个用户管理的页面，修改该页面里面的代码。 在使用keep-alive 时 created()：不会在每次进入页面时执行，而是只执...
Vue切换路由时页面内容没有刷新（重新加载）
yuyang_z的博客
07-26 5761
最近在做关于vue的项目时，问题是这样的，发现在一个页面提交申请单（用localstorage存储的），需要在另一个页面查看提交的申请单的内容，这里涉及到路由的切换，但发现在申请单提交后，另一个页面并不会实时加载这个提交的内容。 查看了之后是App.vue中使用了<keep-alive> keep-alive是Vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DO...
vue3使用keep-alive，不生效，依旧调用created,mounted问题
qq_41859063的博客
02-06 3173
先描述一下我的需求，a页面在onMounted里面请求了数据，再次返回a，就会重新请求数据导致页面再次渲染，解决这个问题我需要在再次返回a页面时不走onMounted，这里就需要是哟个keep-alive实现。
详解关于Vue2.0路由开启keep-alive时需要注意的地方
01-19
在做电商有关的项目中，当我们第一次进入列表页需要请求一下数据，当我从列表页进入详情页，详情页不缓存也需要请求下数据，然后返回列表页，这时候我们使用keep-alive来缓存组件，防止二次渲染，这样会大大的节省...
vue组件 keep-alive 和 transition 使用详解
01-19
和 相似， 是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在父组件链中。 当组件在 内被切换，它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。 include: 字符串或正则表达式。...
vue中keep-alive组件的入门使用教程
12-10
Vue.js中的`<keep-alive>`组件是一种非常实用的功能，用于在组件切换过程中保持组件的状态，避免每次切换都重新创建和销毁组件实例。这在处理需要维持数据或状态的复杂应用时尤其有用，例如音乐播放应用中保持播放...
vue2.0 keep-alive最佳实践
08-30
Vue.js 是一个流行的前端框架，Vue 2.0 版本引入了 `keep-alive` 组件，这个组件的主要作用是缓存 Vue 实例，防止它们在切换时被销毁和重新创建，从而优化性能，特别是在处理复杂的单页应用（SPA）时。下面我们将...
vue中create 什么触发_使用vue-router、keep-alive点击当前组件跳转，会触发该当前组件的created以及mounted钩子函数...
weixin_34348050的博客
02-05 1074
问题描述目前在做一个小demo，使用了parcel+vue+vue-router+axios+muse-ui，实践中需要使用keep-alive保证组件不会被刷新，当点击该问题组件跳转其详情组件的时候，居然触发了该组件的钩子函数，使得该组件的ajax请求又发了一遍请把代码文本粘贴到下方(请勿用图片代替代码)router：const Index = () =>import ('../compo...
alive的不生效 keep vue_Vue中keep-alive的深入理解和使用
weixin_36051281的博客
01-14 548
什么是keep-alive?在平常开发中，有部分组件没有必要多次初始化，这时，我们需要将组件进行持久化，使组件的状态维持不变，在下一次展示时，也不会进行重新初始化组件。也就是说，kee-alive 是 Vue 内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染 。也就是所谓的组件缓存基本用法//被keep-alive包含的组件会被缓存复制代码被keep-alive包含的组件不会被再次初始化...
vue keep-alive二次渲染缓存优化策略、生命周期源码分析
weixin_43294560的博客
01-26 1714
首次渲染 实例化会执行挂载$mount的过程，这一步会执行keep-alive选项中的render函数 render函数在初始渲染时，会将渲染的子vnode进行缓存。同时对应的子真实节点也会被缓存到vnode中。 基本使用 <div id="app"> <button @click="changeTabs('child1')">child1</button> <button @click="changeTabs('child2')">chi
vue解决多页面组件使用keep-alive而mounted不能多次触发问题
浮生离梦的博客
12-20 5372
一、需求问题 在vue的开发中，我们可能会遇到这样的需求。当在多个页面组件进行切换的时候，并且页面组件使用了Keep-alive的情况下，如果使用mounted()钩子函数去做页面的数据请求，那么只会触发一次。如果下次一些相关的定位信息发生了改变，再次切换页面组件的时候，相关的页面不会再重新发起数据请求，跟随相关的定位信息发生改变。 二、需求分析 在vue中，keep-alive是能够缓存动态组件...
【bug】【vue】页面切换keep-alive导致的数据问题
lorogy的博客
12-10 1532
问题描述 每个页面通过computed和watch监测vuex参数，在参数变化时请求ajax更新数据。 在公共组件改变参数时，所有页面都会去重新请求数据，当前页面根据数据重新渲染，但切换回其他页面时，由于keepalive，页面没有变化。 解决方法一 第一步：判断此时路由是否是当前页面，避免多余的数据请求，只有当前页面重新请求数据 watch: { classes(val) { if(...
vue缓存动态组件后每次切换进入页面不能重新渲染问题的解决
浮生离梦的博客
01-04 5435
一、问题描述 在vue的项目中，遇到这样的问题。当使用了keep-alive缓存动态组件以后，每次切换进入页面或者组件的时候会被缓存下来。如果进入一个页面后，使用mounted进行数据请求以后，会被缓存下来。在下一次进入页面，就不会再重新发起数据请求，直接从缓存中读取数据，就不能拿到最新的数据，对页面进行重新渲染了。这个也并不是我们所想要出现的。 二、问题解决 针对这样的问题，我们可以有两种解决办...
keep-alive缓存页面刷新
m0_48232426的博客
01-31 2023
概述：vue开发项目时，需要缓存多个页面的情况使用场景：例如：现有4个页面，页面1，页面2，页面3，页面4要求：1、从1-2-3-4依次跳转时，每次都刷新页面，不进行缓存；2、从4-3-2-1依次返回时，页面不刷新，依次取缓存页面；总结：外到内都需要刷新，内到外皆获取缓存页面；实现方式：keep-alive、vuex、路由钩子函数beforeRouteEnter、beforeRouteLeave
Vue中关于$router.go(-1)又加载created钩子问题解决并延申keepalive
edcee3030的博客
08-12 1187
开发过程中在b.vue页面$router.go(-1)回到a.vue页面。 竟然执行了a.vue页面的created钩子。百思不得其解，后经实验加查询帖子发现是下面的问题在作怪。 keepalive是这么写的： <keep-alive :include="$store.state.nav.keepAlive"> <router-view ></router-view> </keep-alive> store里面的keepAlive如...
keep-alive处理页面回显问题以及如何回显页面上次浏览高度的问题
csstmg的博客
07-20 1187
应用场景 如果未使用keep-alive组件，则在页面回退时仍然会重新渲染页面，触发created钩子，使用体验不好。 在以下场景中使用keep-alive组件会显著提高用户体验，菜单存在多级关系，多见于列表页+详情页的场景如： 商品列表页点击商品跳转到商品详情，返回后仍显示原有信息 订单列表跳转到订单详情，返回，等等场景。 keep-alive的生命周期 初次进入时：created > mounted > activated；退出后触发 deactivated 再次进入：会触发
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值