Vue中的keepalive

最新推荐文章于 2024-01-20 10:00:00 发布
最新推荐文章于 2024-01-20 10:00:00 发布
阅读量512 收藏
点赞数
文章标签： vue.js javascript ecmascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37704442/article/details/129113341
版权

Vue中的keepalive

概念

Vue系统自带的一个组件，功能：缓存组件，防止重复渲染DOM，以此减少加载时间提升性能消耗。

原理

在created函数调用时将需要缓存的虚拟DOM节点保存在this.cache中/在render(页面渲染)时，如果虚拟DOM的name符合缓存条件(可以用include以及exclude控制)；则会从this.cache中取出之前缓存的虚拟DOM实例进行渲染。

作用

被keepalive包含的组件在切换过程中会将状态保留在内存中，防止重复渲染DOM，减少加载时间及性能消耗，提高用户体验性

使用场景

在开发中经常有从列表跳到详情页，然后返回详情页的时候需要缓存列表页的原来数据以及滚动位置，这个时候就需要保存状态，要缓存状态。

Props组件属性

include- 字符串或正则表达式。只有名称匹配的组件会被缓存。
exclude- 字符串或正则表达式。任何名称匹配的组件都不会被缓存。
max-数字。最多可以缓存多少组件实例

生命周期函数

而keepalive缓存的组件，会多出两个生命周期钩子函数：activated与deactivated。
activated生命周期函数调用时机：是第一次进入缓存路由/组件，在mounted之后，beforeRouteEnter守卫传给next的回调函数之前调用，简单点说就是keepalive缓存的组件激活时调用
deactivated生命周期函数调用时机：组件被停用(离开路由)时调用

曾胖神父
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue列表页面缓存 keep-alive，列表跳转详情页面，列表页面缓存
高山景行，一尘不染
03-23 1930
A页面 B页面：列表页面 C页面：详情页面 需求A页面跳转B页面时，B页面需要加载最新数据；C页面跳转B页面时，B页面的数据是A页面跳转到B页面的数据 代码： router-view： <keep-alive> <router-view v-if="$route.meta.keepAlive" /> </keep-alive> <rout...
【前端 - Vue】之 Keep-Alive缓存组件使用语法及原理解析，超详细！
最新发布
共同学习，共同成长
06-01 2347
keep-alive是vue中的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。本篇讲解Keep-Alive缓存组件使用语法及原理解析，超详细！
vue中keep-alive的详细讲解（建议收藏）
贫僧法号依平
01-20 7914
值，用其与新的缓存规则进行匹配，如果匹配不上，则表示在新的缓存规则下该组件已经不需要被缓存，则调用。发生了变化，即表示定义需要缓存的组件的规则或者不需要缓存的组件的规则发生了变化，那么就执行。设置了 keep-alive 缓存的组件，会多出两个生命周期钩子（中的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染。包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。中缓存组件的数量是否超过了设置的最大缓存数量值。表明该组件还没有被缓存过，则以该组件的。缓存的组件被激活的时候，都会执行。
vue中keepAlive缓存的使用
岁末zzz的博客
08-06 2397
在开发中经常有从列表跳到详情页，然后返回详情页的时候需要缓存列表页的状态（比如滚动位置信息），这个时候就需要保存状态，要缓存状态；vue里提供了keep-alive组件用来缓存状态。 可以用以下几种方案解决问题； 一、利用meta标签 1、首先在路由中的meta标签中记录keepAlive的属性为true path: '/classify', name: 'classify', component: () => import('@/views/classify/classify.vue'),
vue组件缓存之keep-alive正确使用姿势
越是安静内敛的人，越容易生不惊人死不休
06-06 6977
em...新的问题又出现了,由于 列表页被缓存了,这个时候我从首页,再点击进入某个列表，也不刷新了，完了，点击首页导航应该进入不同的列表页的. 也就是说，从首页进入列表组件不应该被缓存的。但是但是，我们的项目是用vue开发的webapp,多个组件共用一个窗口，当我们切换路由时，切出路由组件会销毁，所有列表页进入详情页列表页会销毁，重新回到列表页，列表页组件会重新加载。这样需求，如果是小程序的话，默认列表页就会缓存，因为小程序的运行环境是微信客户端，当我们打开一个页面会新建一个webview，
Vue用keep-alive缓存组件
苦作舟的空城机
04-14 3438
keep-alive 用途：对于动态切换的组件进行包裹，使其能够进行缓存，而不是销毁掉后重新创建 在系统开发中，界面上有时会需要对某一块内容进行切换，如果这一部分的内容是几个组件频繁动态切换，为了提高效率，可以使用keep-alive包裹它们。 keep-alive是一个抽象组件，本身不会渲染一个DOM元素，也不会出现在组件的组件链中。（这与transition动画组件类似） 实例 <template> <div class='keepAlives'> &
Vue中KeepAlive 原理与源码分析
发果叁
10-30 1027
keep-alive组件的作用类似于 HTTP 中的持久链接。它可以避免组件实例不断地被销毁和重建。keep-alive的实现并不复杂。当被keep-alive的组件在卸载的时候，渲染器并不会真的将其卸载，而是会将该组件搬运到一个隐藏的容器中，从而使得组件可以维持当前状态。当被keep-alive的组件再次被 “挂载” 时，渲染器也不会真的挂载它，而是将它从隐藏容器中搬运到原容器。最近还整理一份JavaScript与ES的笔记，一共25个重要的知识点，对每个知识点都进行了讲解和分析。
Vue中keepAlive使用
Joy_lazyCat的博客
02-10 1963
// 被keepalive包含的组件会被进行缓存不会被再次init，也就意味着不会重走生命周期函数, 但是平常工作中很多业务场景是希望我们缓存的组件在再次渲染的能做一些事情,vue为keepalive提供了两个额外的hook activated 当keepalive包含的组件再次渲染的时候触发deactivated 当keepalive包含的组件销毁的时候触发 业务场景： 1. 从list页面到detail页面，从detail页面返回list，缓存list页面 2....
解决Vue中使用keepAlive不缓存问题
12-28
1.查看app.vue文件，这个是重点，不能忘记加（我就是忘记加了keep-alive） $route.meta.keepAlive> !$route.meta.keepAlive> 2.查看router.js { path:'/loanmessage', compon
vue中keepAlive的原理
04-04
Vue中的keep-alive组件可以缓存已经渲染过的组件实例，以便在组件切换时可以重用它们，从而提高应用的性能。 具体实现原理如下： 1. keep-alive组件在第一次渲染时，将被包裹的组件实例缓存起来，存储在内部的...
学习Vue3 第二十章（keep-alive缓存组件）
qq1195566313的博客
02-15 1万+
内置组件keep-alive 有时候我们不希望组件被重新渲染影响使用体验；或者处于性能考虑，避免多次重复渲染降低性能。而是希望组件可以缓存下来,维持当前的状态。这时候就需要用到keep-alive组件。 开启keep-alive 生命周期的变化 初次进入时：onMounted> onActivated 退出后触发 deactivated 再次进入： 只会触发 onActivated 事件挂载的方法等，只执行一次的放在 onMounted中；组件每次进去执行的方法放在 onActivat.
Vue中的keep-alive
m0_64969829的博客
02-15 259
前言 一、keep-alive是什么？ 是用来包裹动态组件的,包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们，它自身不会渲染一个DOM元素，也不会出现在父组件中 作为标签使用包裹在需要缓存的组件外 二、作用 在组件切换过程中 把切换出去的组件保留在内存中，防止重复渲染DOM，减少加载时间及性能消耗，提高用户体验性 二、原理 在 created钩子函数调用时将需要缓存的 VNode 节点保存在 this.cache 中／在 render（页面渲染） 时，如果 VNode 的 name 符合缓存条
【Vue】keep-alive作用
m0_74086230的博客
12-07 697
vue keep-alive作用
Vue之keep-alive细节
玉案轩窗的博客
07-23 972
前言 keep-alive组件是Vue的内部组件，Vue官方对于keep-alive的描述是：keep-alive包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。keep-alive是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在组件的父组件链中。当组件在keep-alive内被切换，它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行
个人对keep-alive的理解
u012309740的博客
09-02 208
补基础！有错误欢迎指正！ 首先附上一张图 上图是vue实例从被创造到渲染成DOM的过程。（render开始渲染） Question 1：那么keep-alive包裹的组件是在哪步渲染的呢？ 答案是:patch 这个过程会将vnode(虚拟DOM)转换成真实DOM。并且keep-alive本身不会渲染成真正的DOM节点。因为在创建父子组件时，会根据父组件的abstract属性决定是否忽略该组件，而keep-alive中设置了abstract:true，所以keep-alive本身不会被渲染到DO
Vue中 keep-alive 详解
热门推荐
明天也要努力的博客
01-13 6万+
1. 简介 keep-alive 是 Vue 的内置组件，当它包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。 和 transition 相似，keep-alive 是一个抽象组件：它自身不会渲染成一个 DOM 元素，也不会出现在父组件链中。 作用： 在组件切换过程中将状态保留在内存中，防止重复渲染DOM，减少加载时间及性能消耗，提高用户体验性。 原理： 在 created 函数调用时将需要缓存的 VNode 节点保存在 this.cache 中／在 render（页面渲染） 时，如果 VNode
关于 keep-alive Vue-动态组件使用
weixin_42216520的博客
05-16 1825
keep-alive 是 Vue 的内置组件，当它包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。keep-alive 是一个抽象组件：它自身不会渲染成一个 DOM 元素，也不会出现在父组件中。 用keep-alive包裹的路由页面路由地址不改变时，组件实例不会被销毁 使用场景： 例如有一个商品页面和一个详情页面，这样在两个页面切换的时候就可以用到keep-alive包裹,再切换到详情的时候，把商品页状态位置保留在内存中，没有销毁,（自身不会生成dom元素）等从详情返回的时候，页面还是之前
vue使用keep-alive缓存页面优化项目
田兴的博客
03-01 6272
keep-alive是什么？ <keep-alive> 标签：是Vue的内置组件，能在组件切换过程中将状态保留在内存中，取消组件的销毁函数，防止重复渲染DOM。 当用它包裹 <router-view> 时，会缓存不活动的组件实例，而不是销毁它们。 和 <transition> 相似，它自身不会渲染一个 DOM 元素。 使用 <keep-alive>...
vue中的缓存组件（keep-alive)
SevenLee的个人博客
02-28 4126
当我们进行频换切换，不需要重复渲染的时候，比如tab栏切换，就可以利用keep-alive缓存组件，不需要重复加载，也是提高vue性能的一个方式。 keep-alive是什么？ keep-alive是一个抽象组件：它自身不会渲染一个DOM元素，也不会出现在父组件链中；使用keep-alive包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。 用户在某个列表页面选择筛选条件过滤出一份数据列表，由列表页面进入数据详情页面，再返回该列表页面，我们希望：列表页面可以保留用户的筛选（或选中）状态。keep-al
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值