Vue中的keep-alive

最新推荐文章于 2023-06-29 15:50:14 发布
最新推荐文章于 2023-06-29 15:50:14 发布
阅读量290 收藏
点赞数
分类专栏： Vue 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yzkdcsdn/article/details/121245432
版权

1.对keep-alive的理解：在写项目的时候，会不停的切换两个标签页的内容，就会发现选择好的内容，在切换路由之后会恢复初始化，也就是说之前的状态丢失。原因就是每次切换路由的时候，Vue都创建了一个新的组件实例。解决这个问题就可以用keep-alive元素将其路由出口包裹起来。在切换过程中将状态保留在内存中，防止重复渲染DOM，减少加载时间以及消耗性能，提高用户体验性
2.keep-alive 属性
include(包含的组件缓存)

<keep-alive include="Democ">
<component :is="com"></component>
</keep-alive>
yzkdcsdn
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue keep-alive的使用
gavincz的博客
11-09 302
<keep-alive>是Vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。 <keep-alive> 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 <transition> 相似，<keep-alive>是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在父组件链中。 结合router，缓存部分...
Vue源码-keep-alive
Vito LI
07-16 389
<keep-alive> 是Vue中实现的一个组件。 文件源码：src/core/components/keep-alive.js export default { name: 'keep-alive, abstract: true, // initLifecycle中 props: { include: patternTypes, // 只有匹配的才会被缓存 ...
Vue中keep-alive的深入理解和使用
weixin_49790903的博客
04-18 215
什么是keep-alive? keep-alive是Vue提供给我们一个内置组件，他可以用来保存我们路由切换时组件的状态 组件使用keep-alive以后会新增两个生命周期 actived() deactived(), 我们在切换路由的时候，想保存组件的状态，比如列表页面进入详情，我们想保存列表滚动的位置，我们就可以使用keep-alive保存列表页面的滚动位置。 简单理解 当我们从首页–>列表页–>商详页–>返回到列表页(需要缓存)–>返回到首页(需要缓存)–>再次进入列表
完美解决vue3 keep-alive多个路由使用同一个组件的缓存问题
wjlhanhan的博客
05-26 3052
为什么要这么写，因为主要原因就是改个name的嘛，component.type放的是该组件对象，不能直接改，两个component.type所指向的对象是同一个，所以用一个新对象来。以为解决了，结果报错，报啥错就不说了，我觉得应该是vue用那个弱引用map把组件对象当作key，存了一个其他数据，对象变了就取不到该数据了。其中 visitedViewPaths 是你自己的需要缓存的name列表，现在组件名字由你控制了，就已经解决了。以为没法解决了，结果百度到了一个方法完美解决。总算是解决了这个疑难问题哇。
vue3 使用KeepAlive缓存，多个路由使用同一个组件
最新发布
FenceRain的博客
06-29 1577
vue3 使用KeepAlive缓存，多个路由使用同一个组件
Vue中 keep-alive 详解
热门推荐
明天也要努力的博客
01-13 6万+
1. 简介 keep-alive 是 Vue 的内置组件，当它包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。 和 transition 相似，keep-alive 是一个抽象组件：它自身不会渲染成一个 DOM 元素，也不会出现在父组件链中。 作用： 在组件切换过程中将状态保留在内存中，防止重复渲染DOM，减少加载时间及性能消耗，提高用户体验性。 原理： 在 created 函数调用时将需要缓存的 VNode 节点保存在 this.cache 中／在 render（页面渲染） 时，如果 VNode
Vue-Router中的keep-alive使用（自我理解）
weixin_53874202的博客
03-03 3705
参考：coderwhy老师视频 作用 保持之前页面所选展示内容不被默认内容替换（比如在首页有两个按钮，一个是首页新闻，一个是首页消息，默认展示新闻页面，当点击消息页面后，需要跳转到关于页面，再次点击首页是仍然需要展示之前点击的消息页面内容，而不是一开始默认的新闻内容，这时就需要使用keep-alive来保护跳转前的路由状态不被销毁） 理解构思 需要先通过脚手架创建项目（vue create routerkeepalive） 在Home.vue内部有两个子页面HomeNews.vue和HomeMessage
vue中keep-alive的用法及问题描述
12-29
在做电商有关的项目中，当我们第一次进入列表页需要请求一下数据，当我从列表页进入详情页，详情页不缓存也需要请求下数据，然后返回列表页，这时候我们使用keep-alive来缓存组件，防止二次渲染，这样会大大的节省...
vue中keep-alive组件的入门使用教程
12-10
Vue.js中的`<keep-alive>`组件是一种非常实用的功能，用于在组件切换过程中保持组件的状态，避免每次切换都重新创建和销毁组件实例。这在处理需要维持数据或状态的复杂应用时尤其有用，例如音乐播放应用中保持播放...
vue中keep-alive内置组件缓存的实例代码
01-19
将要缓存的组件使用 keep-alive 包裹住即可。 keep-alive优点的介绍： 1. 切换组件时，当前组件不会触发销毁的生命周期钩子。也就是说不会销毁了。 2. 切换回来时，也不会重新创建。（既然都没有被销毁，哪里来的...
基于vue中keep-alive缓存问题的解决方法
01-19
但是一般在路由上都会加上keep-alive保持数据的状态，除非强制无缓存刷新，这就导致第一次进入详情页面时，可以在created中拿到id，但是返回后，再点击进入，就不会再走相应的生命周期了，无法拿到新的id ...
Vue-router中keep-alive的理解
weixin_40016215的博客
03-08 1049
keep-alive Vue-router的API文档中对于keep-alive的介绍并不多，所以对于初学者来说，可能并不太理解什么是keep-alive、作用是什么，什么时候用，怎么用？所以，通过这篇文章，我为大家详细讲解一下这四个问题。如有错误，还请大家指正，谢谢！ 1、什么是keep-alive `keep-alive`用来缓存组件,避免多次加载相应的组件,减少性能消耗，简单一点来说就是从页面1链接到其他页面后回退到页面1不用在重新执行页面1的代码，只会从缓存中加载之前已经缓存的页面1，这样可以减
Vue缓存路由（keep-alive）以及新的生命周期
code_dream_wq的博客
01-17 1万+
​。
彻底搞懂Vue中keep-alive
一只小白奔向大牛的故事
09-23 6732
彻底搞懂Vue中keep-alive的魔法(上) 上一节最后稍微提到了Vue内置组件的相关内容，从这一节开始，将会对某个具体的内置组件进行分析。首先是keep-alive，它是我们日常开发中经常使用的组件，我们在不同组件间切换时，经常要求保持组件的状态，以避免重复渲染组件造成的性能损耗，而keep-alive经常和上一节介绍的动态组件结合起来使用。由于内容过多，keep-alive的源码分析将...
vue路由keep-alive
atu1111的博客
05-08 3140
vue路由keep-alive   keep-alive会把其包裹的所有组件都缓存起来 1.在App.vue写2个router-view出口 //需要缓存的<keep-alive> 　　<router-view v-if="$route.meta.keepAlive"></router-view> </keep-alive> //不需要缓存的 <router-view v-if="!$route.meta.keepAlive"></ro
keep-alive用法
Lc_style的博客
11-25 148
在<router-view />外包裹keep-alive，这样在不刷新页面的情况下每个页面只会在首次进入触发生命周期，之后再重新进入页面就不会触发created(),mounted()等钩子函数 如果需要在指定页面解除keep-alive的缓存，实现每次进入页面都会触发生命周期，keep-alive有2个属性：include，exclude
关于vue-router的缓存---------keep-alive 的使用
我的博客
07-27 858
需求：后台管理系统的列表页和详情页的跳转，从详情页面跳转回列表页面，希望可以保存列表页面之前的状态（搜索项和分页） 分析：想要同时保存搜索项里面的内容和分页的页码数以及搜索出的列表内容，并且不用刷新，用vue-router 的keep-alive可以很好的解决 解决历程： 1.给需要缓存的路由加keepAlive:true 2.在路由出口加判断app.vue,只缓存keepAlive为true的路由 <keep-alive> <ro.
详解vue组件的keep-alive
拿回忆下酒
04-22 121
是Vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。 <keep-alive>包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。 <keep-alive>与 <transition>相似，只是一个抽象组件，它不会在DOM树中渲染(真实或者虚拟都不会)，也不在父组件链中存在，比如：你永远在 this.$parent 中找不到 kee...
vue中keep-alive两个属性的用法及注意问题
阡*-*陌的博客
12-13 1986
在使用keep-alive时我们只想让其中一个组件缓存，另一个不会缓存。怎么办呢？？？ 因此为keep-alive提供了两个属性： include 值为字符串或者正则表达式匹配的组件name会被缓存。 exclude 值为字符串或正则表达式匹配的组件name不会被缓存。 exclude属性 比 include属性优先级更高。 请注意： include和exclude两个属性匹配的是组件中的name名称，而不是路由中的name名称。 <keep-alive include="Hom
vue中keep-alive
05-26
在 Vue.js 中，`<keep-alive>` 组件可以用来缓存组件实例，避免反复创建和销毁，以提高应用性能。当一个组件被包裹在 `<keep-alive>` 组件内时，这个组件的状态就会被缓存下来，当这个组件再次被渲染时，就会直接...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值