Patch 函数中 anchor 的作用是什么？理解 DOM 插入顺序的关键

anchor 是 patch 插入逻辑的“定位标尺”

在真实 DOM 更新过程中，patch 并不总是把新节点无脑追加（appendChild）到父容器末尾。当需要维持节点顺序（比如列表更新、动态插入、过渡动画或服务端渲染 SSR 的 hydrate 场景），就必须精确控制插入位置。这时，anchor 就作为那个“已存在的参照物”：

• 如果传入了 anchor，patch 会调用 parentNode.insertBefore(newNode, anchor)，把新节点插在 anchor 前面
• 如果 anchor 为 null 或 undefined，才退化为 appendChild
• 这个机制让 patch 支持“中间插入”“保持原有 DOM 序列”等精细操作，是实现高效复用和 hydration 对齐的基础

常见出现 anchor 的场景

anchor 参数通常由上层调用方显式传入，不是 patch 自己生成的。典型用例包括：

• 组件挂载时的 hydrate 过程：服务端已输出 HTML，客户端 patch 需复用这些真实节点，并把新 vnode 插入到对应 anchor（如注释节点或占位元素）处，避免闪屏
• 列表 diff 中的节点移动：当某个带 key 的 vnode 从末尾移到开头，patch 会找到目标位置前一个节点作为 anchor，执行 insertBefore 实现“移动”语义
• Fragment 或多根节点渲染：多个 vnode 要插入同一父容器，但彼此之间有顺序依赖，后续节点以之前已插入节点为 anchor

anchor 和 key 的关系：一个管“位置”，一个管“身份”

key 决定“这个新节点是否能复用旧 DOM”，而 anchor 决定“复用后的 DOM 或新建的 DOM 最终放在哪”。二者协同才能保证：

• 相同 key 的节点不被销毁重建（节省性能）
• 它们在父容器中的相对顺序与 vnode.children 数组一致（保证渲染正确）
• 没有 anchor 时，即使 key 匹配，也可能因 appendChild 导致顺序错乱（尤其在非末尾插入时）

源码中 anchor 的典型签名

以 Vue 3 的 renderer.ts 为例，patch 相关函数常带 anchor 参数：

其中 container 是父容器，anchor 是可选的插入锚点——它必须是 container 的子节点（或 null），否则 insertBefore 会报错。

今天关于《Patch 函数中 anchor 的作用是什么？理解 DOM 插入顺序的关键》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！