节点类型转换指同一位置VNode标签名改变，需销毁旧节点并创建新节点替换，因不同标签DOM构造、属性、命名空间等不兼容，无法复用。
“节点的类型转换”指的是虚拟 DOM 中两个相邻渲染周期里，同一位置上的虚拟节点（VNode）标签名（type）发生改变，比如从 <div> 变成 <span>、从 <input> 变成 <p>，甚至从元素节点变成文本节点或片段节点。这种变化不属于属性更新或子内容变更，而是结构性替换，因此无法复用原有真实 DOM 节点，必须销毁旧节点、创建新节点并重新挂载。
为什么类型不同就不能复用？
浏览器中，<div> 和 <span> 是完全不同的原生元素类型，它们的 DOM 构造函数、默认样式、可设置属性、事件行为都不同。比如：
-
input元素有.value属性和input事件，而p没有； -
svg子元素必须在 SVG 命名空间下创建，div则在 HTML 命名空间； - 自定义组件节点（如
MyButton）与原生标签之间更无共通性。
所以 diff 算法一旦发现新旧 VNode 的 type 不一致，会直接放弃比对子节点和属性，进入强制替换流程。
类型转换时的挂载过程
以 Vue 或类 React 的 patch 机制为例，当检测到 type 不同时，执行以下步骤：
- 调用
hostRemove()（或el.remove()）移除旧 DOM 节点及其全部子树； - 根据新 VNode 的
type调用hostCreateElement()创建全新 DOM 元素（注意命名空间处理，如svg用document.createElementNS）； - 用
setAttributes()设置新节点的 props（class、style、id、自定义属性等）； - 递归调用挂载逻辑，把新 VNode 的
children渲染为真实子节点并 append； - 绑定新节点上声明的事件监听器（如
@click），使用addEventListener； - 将新构建的完整 DOM 片段插入到父容器的原位置（通常用
parentNode.insertBefore(newEl, oldEl.nextSibling)实现无缝替换）。
实际例子：div → p 的转换
假设旧 VNode 是：
{ type: 'div', props: { id: 'box', class: 'active' }, children: ['Hello'] }新 VNode 是：
{ type: 'p', props: { id: 'box', class: 'highlight' }, children: ['Hi'] }虽然 id 相同、文本内容相似，但因 type 从 'div' 变为 'p'，框架不会尝试保留旧 <div> 并改标签——这是非法操作。它会彻底删掉 <div id="box">Hello</div>，再新建 <p id="box" class="highlight">Hi</p> 并插入。
开发者需要注意什么？
类型转换开销明显高于就地更新，应尽量避免在条件分支中混用不兼容标签：
- 避免写
v-if="isText" <span>...</span> <div>...</div>这类同级不同标签的切换； - 可用统一容器包裹，例如都用
<div>，靠 class 控制外观； - 若必须切换语义化标签（如
h2↔p），确保该区域不承载复杂状态（如 focus、selection、第三方插件实例），否则需手动清理； - 服务端渲染或 hydrate 场景下，前后端 VNode type 必须严格一致，否则会触发整块 DOM 重建，丢失 hydration。
