vuekeep-alive原理（vue key的原理）

本篇文章给大家谈谈vuekeep-alive原理，以及vue key的原理对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

• 1、keep-alive实现原理
• 2、vue3使用 keep-alive对iframe进行缓存
• 3、如何理解Vue中的keepalive
• 4、vue 缓存组件keep-alive

keep-alive实现原理

一、概念：内置的抽象组件，自身不会渲染Dom元素，也不会出现在父组件链中。【abstract：true --- 判断当裂携前组件虚拟dom是否渲染成真实dom的关键】。

二、作用：缓存不活动的组件实例。

三、场景： 列表页面选择筛选条件过滤一份数据列表， 再进入详情页面，再返回该列表页面、我们希望：表页面可以保留用户的筛选（或选中）状态。

四、用法：

1、在动态组件中的应用

2、在vue-router中的应用

四、源码

******this.cache 缓存已经创建过的 vnode

******直接实现了 render 函数，而不是我们常规模板的方式。

render方法：

第态源衡一步：获取keep-alive包裹着的第一个子组件对象及其组件名；

第二步：根据设定的黑白名单（如果有）进行条件匹配，决定是否缓存。不匹配，直接返回组件实例（VNode），否则执行

第三步；

第三步：根据组件ID和tag生成缓存Key，并在缓存对象中查找是否已缓存过该组件实例。如果存在，直接取出缓存值并更新该key在this.keys中的位置（更新key的位置是实现LRU置换策略的关键），否则执行第四步；

第四步：在this.cache对象中存储该组件实例并保存key值，之后检查缓存的实例数量是否超过max设置值，超过则根据LRU置换策略删除最近最久未使用的实例（即是下标为0的那个key）;

第五步：最后并且很重要，将该组件实例的keepAlive属性值设置为true。

五、渲染

Vue的渲染是从图中render阶段开始的

但keep-alive的渲染是在patch阶段（构建组件树（虚拟DOM树），并将VNode转换成真正DOM节点的过程）

六、keep-alive包裹的组件是如何使用缓存的？【在patch阶段，会执行createComponent函数】

1、在首次加载被包裹组建时，由keep-alive.js中的render函数可知，vnode.componentInstance的值是undfined，keepAlive的值是true，因为keep-alive组件作为父组件，它的render函数会先于被包裹组件执行；那么只执行到i(vnode,false)，后面的逻辑不执行；

2、再次访问帆做被包裹组件时，vnode.componentInstance的值就是已经缓存的组件实例，那么会执行insert(parentElm, vnode.elm, refElm)逻辑，这样就直接把上一次的DOM插入到父元素中。

vue3使用 keep-alive对iframe进行缓存

使用keep-alive缓存不了iframe界面原因

【1】原理：Vue 的缓存机制并不是直接存储 DOM 结构，而是将 DOM 节点抽象成了一个个 VNode节点。因此，Vue 的 keep-alive 缓存也是基于 VNode节点 而不是直接存储 DOM 节点。在需要渲染的时候从Vnode渲染到真实DOM上。

【2】参数：Keep-alive 组件提供了 include 和 exclude 两个属性，允许组件有条件的进行缓存。

include: 字符串或正则表达式。只有匹配的组件会被缓存。

exclude: 字符串或正则表达式。任何匹配的组件都不会被缓存。

【3】Keep-alive 组件提供了两个生命钩子函数，分别是 activated 和 deactivated 。

activated ：当页面存在缓存的时候执行该函数。

deactivated ：在页面结束时触发该方法，可清除掉滚动方法等缓存。

iframe页里的内容并不属于节枯燃点的信息，所以使用keep-alive依然会重新渲染iframe内的内容。而且iframe每一次渲染就相当于打开一个新的网页窗口，即使把节点保存下来，在渲染时iframe页还是刷新的。

不使用 keep-alive ，因为vnode原理不适用。直纯败晌接把打开过得iframe中的dom保存下来。通过v-show显示隐藏

iframeComponentsArray这个数组是打开过的iframe页做锋面数组

[img]

如何理解Vue中的keepalive

如何理解vue中的keepalive?

什么是keepalive

我们在穗桥余平时开发中，总有部分组件没必要多次 Init,我们需要将组件进行持久化，使组件状态维持不变，在下一次展示时，也不会重新init

keepalive 音译过来就是保持活跃，所以猜滚在vue中我们可以使用keepalive来进行组件缓存

基本使用

上面提到被keepalive包含的组件不会被再次init，也就意味着不会重新走生命周期函数，但是平时工作中消镇很多业务场景是希望我们缓存的组件在再次渲染时能做一些事情，vue为keepalive提供了两个额外的hook,

配合router使用

总结

keepalive是一个抽象组件，缓存vnode，缓存的组件不会被mounted，为此提供activated 和 deactivated 钩子函数, 使用props max 可以控制缓存组件个数

vue 缓存组件keep-alive

kee-alive 是 Vue 内置的一个组件旁祥， 可以使被包含的组件保留状态，或避免重新渲染 。也搭睁就是所谓的组件缓存

keep-alive是一个抽象的组件，缓存的组件不会被mounted,为此提供activated和deactivated钩子函数

在2.1.0 版本后keep-alive新加入了两个属性: include(包含的组件缓存生效) 与 exclude(排除的组件不缓存，优先级大于include) 。

keep-alive可以接收3个属性做为参数进行匹配对应的组件进行缓存:

include 包含的组件(可以为字符串，数组，以及正则表达式,只有匹配的组件会被缓存)

exclude 排除的组件(以为字符串，数组，以及正则表达式,任何匹配的组件都不会被缓存)

max 缓存组件的最大运枝搏值(类型为字符或者数字,可以控制缓存组件的个数)

配合router使用

1.keep-alive 先匹配被包含组件的 name 字段，如果 name 不可用，则匹配当前组件 components 配置中的注册名称。

2.keep-alive 不会在函数式组件中正常工作，因为它们没有缓存实例。

3.当匹配条件同时在 include 与 exclude 存在时，以 exclude 优先级最高(当前vue 2.4.2 version)。比如：包含于排除同时匹配到了组件A，那组件A不会被缓存。

4.包含在 keep-alive 中，但符合 exclude ，不会调用activated和 deactivated。

参考

参考

关于vuekeep-alive原理和vue key的原理的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。