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

原创 已于 2022-08-23 11:44:09 修改 · 1.3k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript #前端 #html

于 2022-08-22 09:44:49 首次发布
本文介绍了解决Vue 2.0中使用keep-alive导致旧组件二次渲染的问题，提出将关键初始化操作移到activated生命周期钩子，以确保高效性能。

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

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

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

vue3使用keep-alive，不生效，依旧调用created,mounted问题
qq_41859063的博客
02-06 5526
先描述一下我的需求，a页面在onMounted里面请求了数据，再次返回a，就会重新请求数据导致页面再次渲染，解决这个问题我需要在再次返回a页面时不走onMounted，这里就需要是哟个keep-alive实现。
详解关于Vue2.0路由开启keep-alive时需要注意的地方
01-19
在做电商有关的项目中，当我们第一次进入列表页需要请求一下数据，当我从列表页进入详情页，详情页不缓存也需要请求下数据，然后返回列表页，这时候我们使用keep-alive来缓存组件，防止二次渲染，这样会大大的节省...
关于keep-alive与router-view一起使用，子组件渲染两次
weixin_43914605的博客
12-08 5218
keep-alive、router-view动态路由一起使用出现的问题
Vue组件强制刷新（重新渲染）
最新发布
weixin_46504400的博客
03-26 3072
如果是刷新某个子组件，则可以通过v-if指令实现。我们知道，当v-if的值发生变化时，组件都会被重新渲染一遍。因此，利用v-if指令的特性，可以达到强制刷新组件的目的。遇到的问题是父组件向子组件传值，父组件的值是从接口来的是异步的，然后传给子组件时子组件接收不到，可能因为父子生命周期的原因，原理很简单，vue使用key标记组件身份，当key改变时就是释放原始组件，重新加载新的组件。组件内置$forceUpdate方法，使用前需要在配置中启用。四、key-changing。二、使用v-if标记。
Vue 后台管理项目中使用keep-alive防止也没每次打开都重载，影响使用体验
haeasringnar的博客
03-31 1250
1、修改AppMain.vue 将 加载组件的地方，使用keep-alive包含起来 ...... <keep-alive> <router-view/> </keep-alive> ...... 2、修改具体的业务代码 假设有一个用户管理的页面，修改该页面里面的代码。 在使用keep-alive 时 created()：不会在每次进入页面时执行，而是只执...
Vue切换路由时页面内容没有刷新（重新加载）
yuyang_z的博客
07-26 5868
最近在做关于vue的项目时，问题是这样的，发现在一个页面提交申请单（用localstorage存储的），需要在另一个页面查看提交的申请单的内容，这里涉及到路由的切换，但发现在申请单提交后，另一个页面并不会实时加载这个提交的内容。 查看了之后是App.vue中使用了<keep-alive> keep-alive是Vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DO...
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路由缓存的三种方式
weixin_43183219的博客
06-17 6725
vue路由的三种缓存方式，全部缓存，指定单个缓存，多个缓存
vue中create 什么触发_使用vue-router、keep-alive点击当前组件跳转，会触发该当前组件的created以及mounted钩子函数...
weixin_34348050的博客
02-05 1127
问题描述目前在做一个小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 599
什么是keep-alive?在平常开发中，有部分组件没有必要多次初始化，这时，我们需要将组件进行持久化，使组件的状态维持不变，在下一次展示时，也不会进行重新初始化组件。也就是说，kee-alive 是 Vue 内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染 。也就是所谓的组件缓存基本用法//被keep-alive包含的组件会被缓存复制代码被keep-alive包含的组件不会被再次初始化...
vue keep-alive二次渲染缓存优化策略、生命周期源码分析
weixin_43294560的博客
01-26 1805
首次渲染 实例化会执行挂载$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 5651
一、需求问题 在vue的开发中，我们可能会遇到这样的需求。当在多个页面组件进行切换的时候，并且页面组件使用了Keep-alive的情况下，如果使用mounted()钩子函数去做页面的数据请求，那么只会触发一次。如果下次一些相关的定位信息发生了改变，再次切换页面组件的时候，相关的页面不会再重新发起数据请求，跟随相关的定位信息发生改变。 二、需求分析 在vue中，keep-alive是能够缓存动态组件...
【bug】【vue】页面切换keep-alive导致的数据问题
lorogy的博客
12-10 1647
问题描述 每个页面通过computed和watch监测vuex参数，在参数变化时请求ajax更新数据。 在公共组件改变参数时，所有页面都会去重新请求数据，当前页面根据数据重新渲染，但切换回其他页面时，由于keepalive，页面没有变化。 解决方法一 第一步：判断此时路由是否是当前页面，避免多余的数据请求，只有当前页面重新请求数据 watch: { classes(val) { if(...
vue缓存动态组件后每次切换进入页面不能重新渲染问题的解决
浮生离梦的博客
01-04 5617
一、问题描述 在vue的项目中，遇到这样的问题。当使用了keep-alive缓存动态组件以后，每次切换进入页面或者组件的时候会被缓存下来。如果进入一个页面后，使用mounted进行数据请求以后，会被缓存下来。在下一次进入页面，就不会再重新发起数据请求，直接从缓存中读取数据，就不能拿到最新的数据，对页面进行重新渲染了。这个也并不是我们所想要出现的。 二、问题解决 针对这样的问题，我们可以有两种解决办...
keep-alive缓存页面刷新
m0_48232426的博客
01-31 2248
概述：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 1330
开发过程中在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 1258
应用场景 如果未使用keep-alive组件，则在页面回退时仍然会重新渲染页面，触发created钩子，使用体验不好。 在以下场景中使用keep-alive组件会显著提高用户体验，菜单存在多级关系，多见于列表页+详情页的场景如： 商品列表页点击商品跳转到商品详情，返回后仍显示原有信息 订单列表跳转到订单详情，返回，等等场景。 keep-alive的生命周期 初次进入时：created > mounted > activated；退出后触发 deactivated 再次进入：会触发
Vue.js keep-alive组件详解与实战应用
Vue.js内置组件`keep-alive`是一个强大的功能，用于在路由切换时缓存组件实例，避免不必要的重新渲染，从而提升用户体验和性能。这个组件特别适用于那些需要保持数据状态或用户界面完整性的动态加载场景，如单页面...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值