Text 和 Comment 节点在 Vue Patch 中走最简路径,无子节点、无属性绑定、无需事件管理,不参与 sameVnode 判断与双端 diff;其更新仅比对 text 值并直接操作 nodeValue,实现极高效挂载与更新。

Text 和 Comment 节点在 Vue 的 Patch 过程中走的是最简路径——它们没有子节点、不涉及属性绑定、无需事件监听器管理,因此不需要递归 diff,也不参与双端对比或 key 映射查找。这种“扁平化”处理让它们的更新极快,也构成了虚拟 DOM 高效性的底层基石。
为什么 Text/Comment 节点不用 sameVnode 判断?
sameVnode 主要用于判断两个元素节点是否可复用(比如 <div key="a"> 和 <div key="a">),它比对 tag、key、isComment、data 等字段。但 Text 和 Comment 节点本身是原子类型:
- Text 节点由
type === Text直接标识,vnode.text是唯一有效字段; - Comment 节点由
type === Comment标识,内容存于vnode.text,且vnode.isComment === true; - 它们没有 tag、class、style、事件等可变属性,也无 children,因此无需进入 sameVnode 的多维校验逻辑。
Text 节点的 Patch 流程:挂载与更新分离
Vue 3 中,Text 节点的处理集中在 processText 函数里,逻辑清晰分两步:
-
挂载时(n1 == null):调用
hostCreateText(text)创建原生Text节点,再通过hostInsert插入 DOM; -
更新时(n1 != null):直接比较
n1.text !== n2.text,若不同则执行hostSetText(elm, text),本质是设置node.nodeValue = text—— 一行 DOM 属性赋值,无重建、无重排。
Comment 节点的 Patch:只读内容,几乎零开销
Comment 节点和 Text 类似,但更轻量:
- 挂载时调用
hostCreateComment(text)→document.createComment(text); - 更新时仅当
n1.text !== n2.text才触发hostSetCommentText,即修改commentNode.nodeValue; - 它不响应数据变化(注释内容通常为静态),实际项目中极少主动更新,所以 Patch 行为基本只发生在首次渲染。
和元素节点比对的差异:没有“结构”,只有“值”
元素节点的 patchVnode 需要层层深入:检查 data 变化、遍历 class/style、比对子节点(可能触发 updateChildren 和双端 Diff);而 Text/Comment 的 patchVnode 内部根本不会走到子节点比对分支 —— 因为 isUndef(vnode.text) 为 false,直接跳过整个 children 更新流程。
这正是“同层比较”原则的极致体现:文本节点就是叶子,叶子之下,再无层级。

















