KeepAlive 内部原理大揭秘：VNode 缓存与真实 DOM 挂载的关系解析

作者：袖梨 2026-08-08

处理KeepAlive 内部原理大揭秘：VNode 缓存与真实 DOM 挂载的关系解析这类问题时，先确认目标场景，再按步骤核对配置或玩法细节。

KeepAlive 的核心是缓存 VNode 并复用其关联的真实 DOM，而非缓存组件实例；它保留 VNode 及其 el 引用的 DOM 节点，激活时直接重挂 DOM、跳过 mount，响应式状态与事件监听器均保持原样。

KeepAlive 的核心不是“缓存组件实例”，而是“缓存 VNode 并复用其关联的真实 DOM”。它不重新创建组件、不重复执行 setup 或 created，也不触发 mounted；关键在于把已卸载的 VNode 及其挂载后的 DOM 节点一并保留在内存中，下次激活时直接恢复显示。

缓存的是 VNode，不是组件实例本身

KeepAlive 包裹的组件在首次渲染后，会生成一个对应的 VNode（虚拟节点），这个 VNode 持有对真实 DOM 元素的引用（el 属性）。当组件被切换出去（比如路由跳转或 v-if 为 false），Vue 不会销毁该 VNode，而是将其存入 cache Map 中，并将对应的真实 DOM 从页面中 detach（移除但不 destroy）——DOM 节点依然存在内存里，只是脱离了 document 流。

  1. VNode 缓存结构：key 是组件的 key 或构造函数标识，value 是整个 VNode 对象（含 componentInstance、subTree、el 等）
  2. 组件实例（instance）仍存活，但其 isMounted 为 false，isUnmounted 也为 false —— 它处于“挂起”状态
  3. 没有额外 clone DOM 或深拷贝 VNode，所有引用关系保持原样，因此响应式数据、事件监听器、定时器等都原封不动

激活时跳过 mount，直接重挂真实 DOM

当 KeepAlive 再次激活该组件（如路由返回、v-if 变回 true），它不会调用 mount()，而是：

  1. 从 cache 中取出原 VNode
  2. 检查其 el 是否还存在且有效（即 DOM 未被外部代码 remove）
  3. 若 el 存在，直接调用 hostInsert(el, parent, anchor) 将 DOM 插回父容器
  4. 恢复组件内部状态：重置 isMounted = true，触发 activated 钩子，但不执行 setup / render / mounted

这个过程绕过了整个标准挂载流水线（createApp → render → patch → mount），所以极快——本质是 DOM 节点的“热插拔”。

DOM 节点为何不会被 GC？因为 VNode 持有强引用

浏览器垃圾回收（GC）只清理“不可达对象”。KeepAlive 的 cache Map 强引用着 VNode，而 VNode 的 el 属性又强引用着真实 DOM 元素及其子树（包括绑定的事件处理器、自定义属性、__vue_app__ 等）。只要 cache 不清空，这些 DOM 就不会被释放。

  1. 即使组件被切走，el.parentNode === null（已 detach），但它仍在内存中，可通过 VNode.el 访问
  2. 若手动调用 el.remove() 或清空 cache，VNode.el 被置为 null，DOM 才可能被 GC
  3. 注意：CSS 动画、canvas 上下文、第三方库挂载的 DOM 片段，只要没被显式销毁，也会随 el 一起保留

include / exclude / max 控制的是 VNode 缓存生命周期

这些 props 不影响渲染逻辑，只干预缓存策略：

  1. include：匹配时才允许进 cache；不匹配则每次销毁重建（走完整 unmount → mount）
  2. exclude：匹配时强制跳过 cache，即使已存在也立即 unmount 并删掉 cache 条目
  3. max：cache 满时按 LRU（最近最少使用）顺序删除最久未激活的 VNode，同时调用其 unmounted 钩子并真正 remove DOM

max 达到时的淘汰动作是同步的：VNode 从 cache 删除 → el 被 hostRemove → 组件 instance 触发 unmounted → 响应式依赖被 cleanup → DOM 可被 GC。

相关文章

精彩推荐