什么是虚拟 DOM 的“挂载”过程？深度拆解 mountElement 函数的执行逻辑-Vue.js-PHP中文网

虚拟DOM挂载是将VNode树递归转化为真实DOM并插入容器的过程。它按节点类型分发处理：创建元素、设置属性与事件、递归挂载子节点、最后插入父容器，严格遵循深度优先顺序，终止于文本节点、空子节点或Fragment中转。

什么是虚拟 dom 的“挂载”过程？深度拆解 mountelement 函数的执行逻辑

虚拟 DOM 的“挂载”过程，是指将一个描述 UI 结构的 JavaScript 对象树（即 VNode 树），递归地转化为真实 DOM 节点，并插入指定容器元素中的全过程。它不是一次性批量创建再插入，而是从根节点出发，按类型分发、逐层构造、就地插入——核心目标是建立可响应、可更新、结构准确的真实 DOM 视图。

挂载的本质：从 VNode 到真实节点的映射与插入

挂载不是“复制”，而是“解释+生成+连接”。每个 VNode 都携带三类关键信息：type（节点类型，如 'div'、'span' 或组件定义）、props（属性与事件）、children（子节点数组）。mountElement 函数正是处理 type 为字符串的普通元素节点时的核心执行者，它负责把这一抽象描述落地为浏览器可识别的真实节点。

其起点通常是 patch 函数在首次渲染时发现无旧节点（oldVNode == null），于是进入 createElm 分支，最终调用 mountElement。

mountElement 的四步执行链

mountElement 并非原子操作，而是一条清晰的执行链条，每一步都承担明确职责：

创建空元素节点：调用 hostCreateElement（Vue 3 中对 document.createElement 的封装），传入 VNode.type（如 'ul'）生成原生 DOM 元素，此时无属性、无子节点、未插入文档
设置静态与动态属性：遍历 VNode.props，区分普通 HTML 属性（class、id、style）与指令（v-model、v-show）；对 class/style 做合并处理，对事件监听器调用 hostAddEventListener 绑定到元素上
递归挂载子节点：若 VNode.children 存在且非空，则进入 children 处理逻辑： • 若 children 是单个 VNode（如文本或嵌套元素），直接调用 mount 递归处理 • 若 children 是数组，则遍历每一项，对每个子 VNode 调用 mount —— 此处触发 mountElement、mountComponent 或 mountText 的再次分发
插入到父容器：当自身及全部子树完成创建与挂载后，调用 hostInsert（封装 document.insertBefore 或 appendChild），将该元素插入到其父节点（parent）中指定位置（通常为末尾）

关键细节：为什么必须递归？边界在哪？

递归不是为了炫技，而是由 DOM 树形结构和 VNode 设计决定的刚性需求。真实 DOM 必须满足“父先于子存在、子依附于父”的物理约束，因此挂载顺序必然是深度优先、自顶向下。

递归终止条件很明确：

遇到叶子节点（如 Text 类型 VNode）：调用 mountText 创建文本节点并插入，不继续递归
遇到空 children（null / undefined / []）：跳过子节点处理步骤，直接插入自身
遇到 Fragment 类型：不创建真实元素，而是遍历其 children 数组，对每个子 VNode 单独 mount 并插入父容器 —— Fragment 本身无 DOM 实体，只是挂载逻辑的“透明中转站”