Vue内置组件之KeepAlive原理

最新推荐文章于 2024-06-20 13:48:40 发布
最新推荐文章于 2024-06-20 13:48:40 发布
阅读量1.7k 收藏 6
点赞数 2
分类专栏： Vue3 前端 文章标签： vue 原理
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cyg_l02/article/details/127813373
版权
本文详细探讨Vue内置组件KeepAlive的工作原理，包括其在组件切换时如何实现缓存，避免不必要的销毁与重建，提高性能。通过分析组件的挂载过程和KeepAlive的具体实现，阐述其关键生命周期方法、缓存策略以及如何在Vue DevTools中展示。同时，还介绍了如何处理缓存组件的props更新。
摘要由CSDN通过智能技术生成

前言

最近看 Vue 相关的知识点，看到 KeepAlive 组件时比较好奇它是怎么做到组件间切换时不重新渲染的，于是便稍微深入的了解了一下

如果你也有兴趣想要了解一下具体内部怎么实现的或者说有一定的了解但是不够熟悉，那么正好你也可以一起巩固下

Tips: 这样面试的时候你就可以大声的问别人这个知识点了🤔。

KeepAlive 是什么

<KeepAlive> 是一个内置组件，它的功能是在多个组件间动态切换时缓存被移除的组件实例。

KeepAlive 功能

KeepAlive 一词借鉴于 HTTP 协议，在 HTTP 协议里面 KeepAlive 又称持久连接，作用是允许多个请求/响应共用同一个 HTTP 连接，解决了频繁的销毁和创建 HTTP 连接带来的额外性能开销。而同理 Vue 里的 KeepAlive 组件也是为了避免一个组件被频繁的销毁/重建，避免了性能上的开销。

// App.vue
<Test :msg="curTab" v-if="curTab === 'Test'"></Test>
<HelloWorld :msg="curTab" v-if="curTab === 'HelloWorld'"></HelloWorld>
<div @click="toggle">toggle</div>

上述代码可以看到，如果我们频繁点击 toggle 时会频繁的渲染 Test/HelloWorld 组件，当用户频繁的点击时 Test 组件需要频繁的销毁/渲染，这就造成很大的渲染性能损失。

所以为了解决这种性能开销，你需要知道是时候使用 KeepAlive 组件。

<KeepAlive>
  <component :is="curTab === 'Test' ? Test : HelloWorld" :msg="curTab"></component>
</KeepAlive>
<div @click="toggle">toggle</div>

在这里插入图片描述

可以看这个录屏，在首次加载后再次频繁的切换并没有重新销毁与挂载，而仅仅是将组件进行了失活（而不是销毁），渲染时只需要重新激活就可以，而不需重新挂载，如果要渲染的组件很大，那就能有不错的性能优化。

想要体验的话可以去看看这个例子🌰官方demo，其中数据会被缓存这个也需要在开发使用中去注意到的

如何实现

实现原理其实很简单，其实就是缓存管理和特定的销毁和渲染逻辑，使得它不同于其他组件。

KeepAlive 组件在卸载组件时并不能真的将其卸载，而是将其放到一个隐藏的容器里面，当被激活时再从隐藏的容器中拿出来挂载到真正的 dom 上就行，这也就对应了 KeepAlive 的两个独特的生命周期activated和deactivated。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ngeUGtXD-1668172656293)(https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/74acec749d6b45fc9d1e3d37dd895e28~tplv-k3u1fbpfcp-watermark.image?)]

先来简单了解下组件的挂载过程

最低0.47元/天 解锁文章
Talljack
关注
  • 2
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue中 key keep-alive的实现原理
10-18
主要介绍了Vue中 key keep-alive的实现原理,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue 指定组件缓存实例详解
08-27
keep-alive 是 Vue 中的一个内置组件，主要用于缓存组件的状态，使其避免重新渲染。使用 keep-alive 可以减少组件的重复渲染，提高应用程序的性能。 keep-alive 的用法 使用 keep-alive 组件非常简单，只需要将其...
vue的keep-alive
dtbk123的博客
04-09 499
vue的<keep-alive>主要是对组件进行缓存，在跳转到其他页面再跳回来时组件还是一样的状态，避免组件重新渲染，它是一个抽象组件，不会渲染到页面。下面来看下应用 //index.js export default new Router({ routes: [ { path: '/', name: 'HelloWorld', co...
vue3.0(十四)内置组件KeepAlive
最新发布
chengcheng9876的博客
06-20 1823
vue3.0(十四)内置组件KeepAlive
Vue中keep-alive原理
热门推荐
庸人方自扰，自在就好
06-29 1万+
keep-alive是用来缓存组件的，比如我们有个列表页，在点击详情页之后，如果返回之后不想刷新列表页，就可以用keep-alive组件进行缓存。除此以外，还有很多应用场景。用法1：我们想要缓存某个组件，只要用keep-alive组件将其包裹就行。 用法2：包裹component组件缓存动态组件，或者包裹router-view缓存路由页面，也就是keep-alive配合路由守卫（元信息）实现缓存。比如常在router.js路由表里定义好哪些页面需要缓存，就可以通过下面这样实现了： 属性 include
Vue中的 keep-alive 实现原理
qq_39454432的博客
04-22 1697
Vue中的 keep-alive 实现原理
vue通过keep-alive实现路由缓存
lpw17175844的博客
04-06 434
(⊙﹏⊙) pm提了需求，让从edit页面返回到 list页面的时候实现 搜索，翻页的缓存，就想到了keep-alive ，需要用actived生命周期代替原来的 created 或者 mounted 生命周期 踩坑注意 注意：如果有个多个router-view注意keep-alive包裹在哪个层级的router // list页面再次刷新组件的时候会进入这个生命周期 activated() { this.getList() } <template> <keep-a
vue缓存的keepalive页面刷新数据的方法
10-17
为了解决这个问题，Vue提供了一个内置组件，可以对组件进行缓存，但是这也会导致组件不会在每次切换时重新创建，这可能会导致我们需要手动更新数据。本文将介绍如何在使用Vue的组件缓存页面时，更新页面数据。 首先...
vue.js内置组件之keep-alive组件使用
10-18
`keep-alive`是Vue.js框架中的一个内置组件，用于实现组件的缓存功能，避免在切换组件时销毁和重新创建实例，从而提高性能并保持组件的状态。在使用`keep-alive`时，它会包裹动态组件，并在不活动时缓存组件实例。 ...
Vue keepAlive 数据缓存工具实现返回上一个页面浏览的位置
10-17
Vue.js 的 `keep-alive` 是一个内置的组件，用于缓存组件的状态，使得当用户离开组件并返回时，组件的状态能够得以保留。在上述场景中，`keep-alive` 主要用于实现从详情页返回列表页时，保持列表页的浏览位置和数据...
vue源码系列之keep-alive实现原理
qq_36262295的博客
04-24 362
keep-alive是Vue中内置的一个抽象组件， 它自身不会渲染一个 DOM 元素，也不会出现在父组件链中。 当它包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。 created () { this.cache = Object.create(null) // 存储需要缓存的组件 this.keys = [] // 存储每个需要缓存的组件的key，即对应this.cache对象中的键值 }, // 销毁keep-alive组件的时候，对缓存中的每个组件执行销毁 dest
Vue Keep-alive 原理
weixin_30610755的博客
03-26 162
Keep-alive 是 Vue 的一个内置组件，会缓存不活动的组件实例，防止重复渲染DOM。 一、原理 　　Vue 的缓存机制并不是直接存储 DOM 结构，而是将 DOM 节点抽象成了一个个VNode节点。 　　因此，Vue 的 keep-alive 缓存也是基于VNode节点而不是直接存储 DOM 节点。 二、参数 　　Keep-alive 组件提供了 i...
总结一下vue 得keepalive得实现原理
qq_38935512的博客
09-03 2080
keep live是vue得一个内置组件，能将组件缓存进内存，下次加载直接从内存中获取。 有2个属性 include = “a” 将缓存组件名为a得组件 exclude=‘a’ 组件名为a得不会被缓存 注：组件名是 组件内内得name值 跟data同级 提供两个生命周期 activated与deactivated 研究源码，分析原理（我用自己得话总结得） 分析keep-live组件内部 1.缓存得都是vnode节点，created周期里 创建了一个cache这么一个缓存容器，再销毁周期里 清除
vue中keep-alive的详细讲解（建议收藏）
贫僧法号依平
01-20 7456
值，用其与新的缓存规则进行匹配，如果匹配不上，则表示在新的缓存规则下该组件已经不需要被缓存，则调用。发生了变化，即表示定义需要缓存的组件的规则或者不需要缓存的组件的规则发生了变化，那么就执行。设置了 keep-alive 缓存的组件，会多出两个生命周期钩子（中的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染。包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。中缓存组件的数量是否超过了设置的最大缓存数量值。表明该组件还没有被缓存过，则以该组件的。缓存的组件被激活的时候，都会执行。
Vue----keep-alive内部原理
weixin_42910765的博客
11-05 368
要想搞明白组件的内部实现原理，首先我们得搞明白这个组件怎么用以及为什么要用它，关于组件，官网如下介绍： 是Vue中内置的一个抽象组件，它自身不会渲染一个 DOM 元素，也不会出现在父组件链中。当它包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。 这句话的意思简单来说：就是我们可以把一些不常变动的组件或者需要缓存的组件用包裹起来，这样 'keep-alive ’ 就会帮我们把组件保存在内存中，而不是直接的销毁，这样做可以保留组件的状态或避免多次重新渲染，以提高页面性能。 ’keep-aliv
Vue keep-alive实践总结
weixin_34290631的博客
08-30 1429
<keep-alive>是Vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。 <keep-alive> 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 <transition> 相似，<keep-alive> 是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在父组件链中。 prop: inclu...
vue组件keep-alive的应用及原理
SunShinessx的博客
03-25 474
介绍 keep-alive是Vue.js的一个内置组件。它能够不活动的组件实例保存在内存中，而不是直接将其销毁，它是一个抽象组件，不会被渲染到真实DOM中，也不会出现在父组件链中。它提供了include与exclude两个属性，允许组件有条件地进行缓存。 应用场景 比如移动端页面的基本架构是tab点击来切换页面。每个页面都是一个组件，每次切换路由，都会重新渲染这个组件。都得重新请求数据...
万字长文——前端开发必看的KeepAlive原理详解
XIAO_A_fighting的博客
05-10 1497
本文将从原理+应用+源码(Vue2和Vue3)的角度全面介绍 组件，全文共计16000字，阅读时间大概30min+，建议码住在看，相信看完本文的你会对该组件有一更深刻的认识。
vue源码解析之keep-alive
weixin_39616739的博客
07-11 366
keep-alive props： include - 字符串或正则表达式。只有名称匹配的组件会被缓存。 exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存。 max - 数字。最多可以缓存多少组件实例。 用法： 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和transition 相似, keep-alive是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会...
用vue实现keepalive 组件
09-18
### 回答1： 好的，关于用Vue实现keep-alive组件的问题，我可以给您回答。 在Vue中，可以使用内置的keep-alive组件来实现组件缓存和复用的功能。使用keep-alive包裹的组件会被缓存起来，当组件被切换时，可以直接从缓存中获取组件实例，避免了重复创建和销毁组件，提高了应用的性能。 以下是一个使用keep-alive组件的例子： ``` <template> <div> <keep-alive> <component :is="currentComponent"></component> </keep-alive> </div> </template> <script> export default { data() { return { currentComponent: 'ComponentA' } } } </script> ``` 在上面的例子中，我们将一个动态组件包裹在keep-alive中，并通过绑定is属性来指定当前显示的组件。当切换组件时，Vue会自动从缓存中获取或销毁组件，实现了组件的缓存和复用。 ### 回答2： Vue中的keep-alive组件是用来缓存动态组件的，可以提高性能和用户体验。下面是一个使用Vue实现keep-alive组件的步骤： 1. 首先，需要在Vue的根组件中引入keep-alive组件，并在模板中使用<keep-alive></keep-alive>标签包裹需要缓存的动态组件。 2. 在需要缓存的组件中，可以通过设置<keep-alive>标签的include属性，指定需要缓存的组件。例如，<keep-alive :include="['组件A', '组件B']"></keep-alive>，表示只有组件A和组件B会被缓存，其他组件每次都会被重新创建。 3. 可以通过设置<keep-alive>标签的exclude属性，排除不需要被缓存的组件。例如，<keep-alive :exclude="['组件C', '组件D']"></keep-alive>，表示除了组件C和组件D，其他组件都会被缓存。 4. 可以通过设置<keep-alive>标签的max属性，控制最大缓存的组件实例数量。例如，<keep-alive :max="5"></keep-alive>，表示最多只缓存5个组件实例，超过数量的组件实例会被销毁。 5. 在需要缓存的动态组件中，可以通过定义activated和deactivated生命周期钩子函数，来处理组件在被缓存和激活时的相关逻辑。例如，在activated生命周期钩子函数中可以执行组件被激活时的一些操作。 通过以上步骤，我们可以使用Vue的keep-alive组件来缓存需要动态加载的组件，提高性能和用户体验。 ### 回答3： 在Vue中，可以使用<keep-alive>组件来实现组件的缓存和复用。 首先，在需要进行缓存的组件外部包裹<keep-alive>标签。例如： ``` <template> <div> <keep-alive> <router-view></router-view> </keep-alive> </div> </template> ``` 然后，在需要被缓存的组件中使用<keep-alive>的include属性来指定需要缓存的组件名称。例如： ``` <template> <div> <button @click="count++">{{ count }}</button> </div> </template> <script> export default { name: 'CachedComponent', data() { return { count: 0 } }, beforeRouteLeave(to, from, next) { if (to.name !== 'CachedComponent') { this.$destroy(); } next(); } } </script> ``` 在以上代码中，定义了一个带有计数器的组件，并在beforeRouteLeave生命周期钩子中实现了销毁组件的逻辑。这样，当从CachedComponent组件切换到其他组件时，CachedComponent组件会被销毁。 最后，在路由配置中，将需要使用缓存功能的组件的name属性设置为需要缓存的组件名称。例如： ``` const router = new VueRouter({ routes: [ { path: '/', name: 'CachedComponent', component: CachedComponent }, { path: '/other', name: 'OtherComponent', component: OtherComponent } ] }) ``` 通过以上步骤，就可以在Vue中实现组件的缓存和复用了。使用<keep-alive>组件包裹需要缓存的组件，设置include属性指定需要缓存的组件名称，将需要使用缓存的组件的name属性设置为需要缓存的组件名称。这样，在切换到其他组件并再次回到需要缓存的组件时，Vue会直接复用之前的组件实例，而不会重新创建。这样可以提高组件的渲染效率和用户体验。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值