总结一下vue 得keepalive得实现原理

最新推荐文章于 2024-04-22 17:38:46 发布
最新推荐文章于 2024-04-22 17:38:46 发布
阅读量2k 收藏 1
点赞数 2
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38935512/article/details/108377200
版权

keep alive是vue得一个内置组件，能将组件缓存进内存，下次加载直接从内存中获取。

有2个属性
include = “a” 将缓存组件名为a得组件
exclude=‘a’ 组件名为a得不会被缓存
注：组件名是 组件内内得name值 跟data同级

提供两个生命周期
activated与deactivated

研究源码，分析原理（我用自己得话总结得）

分析keep-alive组件内部
1.缓存得都是vnode节点，created周期里 创建了一个cache这么一个缓存容器，再销毁周期里 清除这个容器
2.通过 getFirstComponentChild来获取组件得name
3.通过matches 来匹配他缓存得条件，
4.如果需要缓存，遍历cache这个容器，如果之前缓存过得 覆盖，反之 存进去vnode

小墨宝
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue内置组件之KeepAlive原理
Talljack 的博客园
11-11 1703
最近看 Vue 相关的知识点，看到 KeepAlive 组件时比较好奇它是怎么做到组件间切换时不重新渲染的，于是便稍微深入的了解了一下如果你也有兴趣想要了解一下具体内部怎么实现的或者说有一定的了解但是不够熟悉，那么正好你也可以一起巩固下Tips: 这样面试的时候你就可以大声的问别人这个知识点了🤔。
Vue简单实现原理详解
10-15
主要介绍了Vue简单实现原理,结合实例形式详细分析了Vue实现原理与操作注意事项,需要的朋友可以参考下
vue的keep-alive
dtbk123的博客
04-09 492
vue的<keep-alive>主要是对组件进行缓存，在跳转到其他页面再跳回来时组件还是一样的状态，避免组件重新渲染，它是一个抽象组件，不会渲染到页面。下面来看下应用 //index.js export default new Router({ routes: [ { path: '/', name: 'HelloWorld', co...
Vue中的 keep-alive 实现原理
最新发布
qq_39454432的博客
04-22 1517
Vue中的 keep-alive 实现原理
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实现路由缓存
lpw17175844的博客
04-06 423
(⊙﹏⊙) pm提了需求，让从edit页面返回到 list页面的时候实现 搜索，翻页的缓存，就想到了keep-alive ，需要用actived生命周期代替原来的 created 或者 mounted 生命周期 踩坑注意 注意：如果有个多个router-view注意keep-alive包裹在哪个层级的router // list页面再次刷新组件的时候会进入这个生命周期 activated() { this.getList() } <template> <keep-a
keepalived原理
aaronthon的博客
08-28 1080
http://zkchang.blog.51cto.com/10574636/1706998   一．keepalived和其工作原理：   keepalived是一个类似于Layer2,4,7交换机制的软件。是Linux集群管理中保证集群高可用的一个服务软件，其功能是用来防止单点故障。   keepalived的工作原理：          keepalived是基于...
Vue底层实现原理总结
08-28
小编给大家整理Vue底层实现原理的知识点总结，如果大家对此有需要，可以学习参考下，希望我们整理的内容能够帮助到你。
解决Vue中使用keepAlive不缓存问题
10-15
主要介绍了Vue中使用keepAlive不缓存问题，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
Vue keep-alive的实现原理
yydounai的博客
01-16 5172
使用vue的时候，想必大家都是用过keep-alive，其作用就是缓存页面以及其状态。使用了这么久vue只知道如何使用但不明白其中原理，昨天翻看实现代码，这里做个笔记。 这里以vue3为例，整个组件的源码为： const KeepAliveImpl = { name: `KeepAlive`, // Marker for special handling inside the re...
vue 动态组件名_通过keepalive实现了解vue组件实现原理（1）
weixin_39968490的博客
11-20 91
之前有一篇文章《vue如何通过el属性将实例注入到DOM中》分析了作为一个文本节点，vue是如何进行挂载的。本次通过一个keep-alive的例子带大家来了解vue框架组件的实现原理。例子非常简单，页面长这个样子：代码如下：通过switch按钮来使动态组件在组件A和组件B中间切换，其中组件A是一个可以输入的输入框。在A和B中间切换的过程中，通过keep-a...
Vue Keep-alive 原理
weixin_30610755的博客
03-26 148
Keep-alive 是 Vue 的一个内置组件，会缓存不活动的组件实例，防止重复渲染DOM。 一、原理 　　Vue 的缓存机制并不是直接存储 DOM 结构，而是将 DOM 节点抽象成了一个个VNode节点。 　　因此，Vue 的 keep-alive 缓存也是基于VNode节点而不是直接存储 DOM 节点。 二、参数 　　Keep-alive 组件提供了 i...
Vue中keep-alive的原理是什么？
ZKH129的博客
06-12 391
Vue中keep-alive的原理是什么？
vue源码解析之keep-alive
weixin_39616739的博客
07-11 357
keep-alive props： include - 字符串或正则表达式。只有名称匹配的组件会被缓存。 exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存。 max - 数字。最多可以缓存多少组件实例。 用法： 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和transition 相似, keep-alive是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会...
通俗易懂了解Vue内置组件keep-alive内部原理
liubangbo的专栏
12-11 555
文章转自：https://www.cnblogs.com/wangjiachen666/p/11497200.html 通俗易懂了解Vue内置组件keep-alive内部原理 阅读目录 1. 官方介绍及其用法 1.1 组件介绍 1.2 用法 2. 实现原理 2.1 props 2.2 created 2.3 destroyed 2.4 mounted 2.5 render 3. 生命周期钩子 4. 总结 回到顶部 1. 官方介绍及其用法 .
Vue----keep-alive内部原理
weixin_42910765的博客
11-05 348
要想搞明白组件的内部实现原理，首先我们得搞明白这个组件怎么用以及为什么要用它，关于组件，官网如下介绍： 是Vue中内置的一个抽象组件，它自身不会渲染一个 DOM 元素，也不会出现在父组件链中。当它包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。 这句话的意思简单来说：就是我们可以把一些不常变动的组件或者需要缓存的组件用包裹起来，这样 'keep-alive ’ 就会帮我们把组件保存在内存中，而不是直接的销毁，这样做可以保留组件的状态或避免多次重新渲染，以提高页面性能。 ’keep-aliv
vue组件keep-alive的应用及原理
SunShinessx的博客
03-25 466
介绍 keep-alive是Vue.js的一个内置组件。它能够不活动的组件实例保存在内存中，而不是直接将其销毁，它是一个抽象组件，不会被渲染到真实DOM中，也不会出现在父组件链中。它提供了include与exclude两个属性，允许组件有条件地进行缓存。 应用场景 比如移动端页面的基本架构是tab点击来切换页面。每个页面都是一个组件，每次切换路由，都会重新渲染这个组件。都得重新请求数据...
【vue设计与实现】内部组件和模块 1 - KeepAlive组件的实现原理
loyd3的博客
11-18 324
组件的激活和失活KeepAlive一词来自于HTTP协议，在HTTP协议里，KeepAlive又称HTTP持久链接（HTTP persistent connection），其作用是允许多个请求或响应共用一个TCP连接。如果没有KeepAlice，一个HTTP连接会在每次请求/响应结束后关闭，当下一次请求发生时，会建立一个新的HTTP连接，频繁地销毁，创建HTTP连接会带来额外的性能开销，KeepAlive就是为了解决这个问题的。
vue keep-alive组件的使用以及原理
weixin_38069018的博客
11-22 259
vue keep-alive组件的使用以及原理。 keep-alive是Vue.js的一个内置组件。它能够不活动的组件实例保存在内存中，而不是直接将其销毁，它是一个抽象组件，不会被渲染到真实DOM中，也不会出现在父组件链中。 它有两个生命周期： activated: keep-alive组件激活时调用 deactivated: keep-alive组件停用时调用 它提供了include与exclude两个属性，允许组件有条件地进行缓存。 有2个属性 include = “a” 将缓存组件名为a得组件 ex
vue中keepAlive的原理
04-04
Vue中的keep-alive组件可以缓存已经渲染过的组件实例，以便在组件切换时可以重用它们，从而提高应用的性能。 具体实现原理如下： 1. keep-alive组件在第一次渲染时，将被包裹的组件实例缓存起来，存储在内部的cache对象中。 2. 当被包裹的组件实例被销毁时，keep-alive组件会将其从cache对象中删除。 3. 当需要渲染被包裹的组件实例时，keep-alive组件会先检查cache对象中是否已经有相应的实例，如果有，则直接从cache对象中获取，否则再重新渲染。 4. 当keep-alive组件被卸载时，它会将所有缓存的组件实例也一并销毁。 总的来说，keep-alive组件主要是通过缓存已经渲染过的组件实例，以避免重复渲染，从而提高应用的性能。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值