虚拟DOM挂载是将VNode树递归转化为真实DOM并插入容器的过程。它按节点类型分发处理：创建元素、设置属性与事件、递归挂载子节点、最后插入父容器，严格遵循深度优先顺序，终止于文本节点、空子节点或Fragment中转。
虚拟 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 实体，只是挂载逻辑的“透明中转站”
它不做什么？常见误解澄清
mountElement 不参与以下工作，避免混淆职责：
- 不解析模板或编译 AST —— 那是 compile 阶段的事，发生在挂载前
- 不触发组件实例化或 setup 执行 —— 那是 mountComponent 的任务，mountElement 只处理原生标签
- 不进行新旧节点比对（diff）—— patch 函数才做这个；mountElement 只在“首次创建”路径中被调用
- 不管理响应式依赖收集 —— data 响应化已在 new Vue 或 createApp 时完成，挂载阶段只消费依赖
