vue中keep-ailve的作用

最新推荐文章于 2022-11-11 21:23:26 发布
最新推荐文章于 2022-11-11 21:23:26 发布
阅读量362 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/HWSss/article/details/104821652
版权

主要用于包裹 组件反复使用多次的组件 避免重新删除 渲染 浪费性能

include="组件名"	 匹配组件会被缓存  其余不会缓存
exclued="组件名" 匹配组件不会被缓存  其余会被缓存

组件切换时
在缓存组件被激活时 会触发沟子函数 activated函数
组件停用是 激活 deactivated 函数

编程奥特曼
关注
vue3 keep-alive组件缓存
秋秋小事
04-17 1595
keep-alive组件缓存
【前端 - Vue】之 Keep-Alive缓存组件使用语法及原理解析，超详细！
最新发布
共同学习，共同成长
06-01 2394
keep-alive是vue中的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。本篇讲解Keep-Alive缓存组件使用语法及原理解析，超详细！
解决vue单页面 回退页面 keeplive 缓存问题
10-15
主要介绍了解决vue单页面 回退页面 keeplive 缓存问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue中keep-alive组件的作用
小柒的前端之旅
02-01 645
keep-alive组件的作用 作用：用于保留组件状态或避免重新渲染（缓存的作用） 比如：当一个目录页面与一个详情页面，用户经常：打开目录页面=>进入详情页面=>返回目录页面=>打开详情页面，这样目录页面就是一个使用频率很高的页面，那么就可以对目录组件使用<keep-alive></keep-alive>进行缓存，这样用户每次返回目录时，都能从缓存中快速渲...
JavaScript：leetcode_146. LRU缓存机制（vue的keep-live所使用的缓存机制）
Eighteen Z
05-26 279
题目说明 运用你所掌握的数据结构，设计和实现一个 LRU (最近最少使用) 缓存机制。它应该支持以下操作： 获取数据 get 和 写入数据 put 。 获取数据 get(key) - 如果关键字 (key) 存在于缓存中，则获取关键字的值（总是正数），否则返回 -1。 写入数据 put(key, value) - 如果关键字已经存在，则变更其数据值；如果关键字不存在，则插入该组「关键字/值」。当缓存容量达到上限时，它应该在写入新数据之前删除最久未使用的数据值，从而为新的数据值留出空间。 进阶:
vue 中后台三级及以上路由嵌套，路由缓存(keep-live)不生效的问题
weixin_42402812的博客
03-11 1322
以vue中后台案例页面文件是这样的（路由里面的名称和vue页面中的名称要一致，且必须都要写） nested menu1 menu1-1 menu1-2 menu1-2-1 const nestedRouter = { path: '/nested', component: Layout, redirect: '/nested/menu1/menu1-1', name: 'Nested', meta: { title: 'Nested Routes',
vue中 keep-alive 理解以及使用
dachuichaobang的博客
04-22 1546
概念： keep-alive 是 Vue 的内置组件， 当它包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。 和 transition 相似，keep-alive 是一个抽象组件： 它自身不会渲染成一个 DOM 元素，也不会出现在父组件链中。 作用： 在组件切换过程中 把切换出去的组件保留在内存中， 防止重复渲染DOM，减少加载时间及性能消耗，提高用户体验性 原理：     在 created 函数...
vue 使用 keep-alive
qq_45770253的博客
07-28 1万+
vue3 使用 keep-alive 踩坑踩了半天！！！ 我这里的小 DEMO 是，首先打开主页是新闻的界面 然后我点击跳转到消息界面 之后我想要做的效果，是跳转到其他的页面之后，我再次回到首页，那么他的页面还是保持在消息的界面 这里注意，是要给哪个页面进行缓存就给哪个页面添加 keepAlive:true ！！！第二步！！！，在 App.vue 界面中添加 keep-alive，注意下面这种写法是 vue3 的新写法，之前都是 keep-alive将 router-view 包裹住的 ！！！第三步！！
Vue 中 keep-alive 组件与 router-view 组件的那点事
vv_bug
12-01 3679
最近项目中有小伙伴找到我，问我“为啥他写的页面第一次进去可以触发 onCreate 函数，第二次再进的时候就不触发了呢？”（因为我们项目是一个大型的项目，每个开发可能只接触到自己开发的一小部分），然后我就说你可以试着在 activated 钩子函数中做处理，然后他又接着问我“activated 钩子函数又是怎么调用的呢？”，ok！这小子是问上瘾了，我们下面就来详细解析一下。 keep-alive <keep-alive> 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 <tra
说说你对Vue的keep-alive的理解
bb_xiaxia1998的博客
10-05 1447
keep-alive在平常开发中，有部分组件没有必要多次初始化，这时，我们需要将组件进行持久化，使组件的状态维持不变，在下一次展示时，也不会进行重新初始化组件。也就是说，keepalive是Vue内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染。也就是所谓的组件缓存是Vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和相似，是一个抽象组件：它自身不会渲染一个DOM元素，也不会出现在父组件链中。
vue keep-alive组件
weixin_44684357的博客
04-15 561
假设，两个同级组件在进行切换的时候，两个组件一直在做创建和销毁的过程，为了保持组件的状态不被来回创建和销毁，就需要用到keep-alive 使用组件将切换的地方包裹起来就可以实现保存组件状态了！ <keep-alive> <router-view></router-view> </keep-alive> 保存组件状态的原理就是给dom进行了缓存。 使用keep-alive对三个组件进行切换，点击一个渲染一个组件，一次渲染只渲染一个组件，并且点击下一个组件时
vue中keep-alive的使用及详解
热门推荐
关注最新技术问题并持续维护更新
05-19 12万+
概念     keep-alive 是 Vue 的内置组件，当它包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 transition 相似，keep-alive 是一个抽象组件：它自身不会渲染成一个 DOM 元素，也不会出现在父组件链中。 作用     在组件切换过程中将状态保留在内存中，防止重复渲染DOM，减少加载时间及性能消耗，提高用户体验性 原理     在 created 函数...
对 keep-alive 的理解，使用场景以及存在的问题
小草莓的博客
07-06 5405
include(包含的组件缓存) 、 exclude(排除的组件不缓存，优先级大于include) 、max(最大缓存数，内部采用lru算法用于维护缓存列表)若用 keep-alive 包住A组件和B组件，从A组件跳转到B组件，在哪里更新B组件页面的数据？② exclude - 字符串或正则表达式，任何名称name匹配的组件都不会被缓存。，缓存的组件重新进入不会再触发created生命周期中的方法，因此数据不会更新。③ max - 缓存的最大个数（如果超过最大缓存个数，则移除最先缓存的组件）
总结一下vue 得keepalive得实现原理
qq_38935512的博客
09-03 2106
keep live是vue得一个内置组件，能将组件缓存进内存，下次加载直接从内存中获取。 有2个属性 include = “a” 将缓存组件名为a得组件 exclude=‘a’ 组件名为a得不会被缓存 注：组件名是 组件内内得name值 跟data同级 提供两个生命周期 activated与deactivated 研究源码，分析原理（我用自己得话总结得） 分析keep-live组件内部 1.缓存得都是vnode节点，created周期里 创建了一个cache这么一个缓存容器，再销毁周期里 清除
vue对象更新检测
你如今的气质里，藏着你走过的路，经历过的事，读过的书，和爱过的人。
03-16 737
数组更新检测 变异方法 Vue 包含一组观察数组的变异方法，所以它们也将会触发视图更新。这些方法如下： push() pop() shift() unshift() splice() sort() reverse() 替换数组 变异方法 (mutation method)，顾名思义，会改变被这些方法调用的原始数组。相比之下，也有非变异 (non-mutating meth...
Vue内置组件之KeepAlive原理
Talljack 的博客园
11-11 1756
最近看 Vue 相关的知识点，看到 KeepAlive 组件时比较好奇它是怎么做到组件间切换时不重新渲染的，于是便稍微深入的了解了一下如果你也有兴趣想要了解一下具体内部怎么实现的或者说有一定的了解但是不够熟悉，那么正好你也可以一起巩固下Tips: 这样面试的时候你就可以大声的问别人这个知识点了🤔。
解决keep-live使用之后的问题
VVVZCS的博客
09-10 5567
keep-aliv能够帮助我们实现页面ajax请求只被请求一次，在你跳转页面的时候，也不会被请求多次，可是比如在旅游页面中，当我们在城市选择页面重新选择城市，这个时候就需要重新发送一个ajax请求，来显示对应城市的推荐内容 解决方法1： 使keep-alive新增的一个生命周期函数activated（实际上还有一个对应的deactivated函数），这个函数和mounted相比，mounted...
vue2.0 keep-active使用方法
MJ1314MJ的博客
10-12 1200
1、基本用法： vue2.0提供了一个keep-alive组件用来缓存组件,避免多次加载相应的组件,减少性能消耗 有时候 可能需要缓存整个站点的所有页面,而页面一般一进去都要触发请求的 在使用keep-alive的情况下 2.缓存部分页面或者组件 (1)使用router.mate属性 /*这是目前用的比较多的方式*/ router设置: ... routes: [ { path: '/', redirect: '/index', component: Index
vue中keepAlive组件的作用及使用方式
搬砖猴哥
04-18 3万+
在面试的时候，很多面试官再问vue的时候可能就会提一嘴，你知道keep-alive有什么作用吗？ keep-alive是vue内置的一个组件，而这个组件的作用就是能够缓存不活动的组件，我们能够知道，一般情况下，组件进行切换的时候，默认会进行销毁，如果有需求，某个组件切换后不进行销毁，而是保存之前的状态，那么就可以利用keep-alive来实现 我这里利用脚手架创建项目后会生成home和about...
vue中keep-alive 的作用
12-02
Vue中的keep-alive是一个抽象组件，用于缓存不活动的组件。当组件被包裹在keep-alive标签内时，这个组件就会被缓存起来，而不是被销毁。这样可以避免在组件切换时频繁地创建和销毁组件，提高应用的性能和用户体验。 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值