不同节点类型必须替换而非复用，因为DOM结构、属性语义、事件机制及组件内部状态（如响应式数据、生命周期）均不兼容，强行复用会导致渲染异常与逻辑错乱。
Vue.js 的 Diff 算法在比对虚拟 DOM 节点时，若发现新旧节点类型不一致（比如 div 变成 span，或组件 A 切换为组件 B），会跳过精细化比对，直接卸载旧节点、挂载新节点。这是一种强制更新策略，核心目的是避免跨类型复用带来的状态错乱和渲染异常。
为什么不同节点类型必须替换而非复用？
DOM 元素类型改变后，底层结构、可设置属性、事件绑定方式甚至浏览器渲染行为都可能不同。例如：
-
input和div的value属性语义完全不同； -
select内部依赖option子节点，换成p后无法保留选择状态； - 自定义组件 A 和 B 拥有完全独立的响应式数据、生命周期和插槽逻辑，强行复用会导致 this 指向混乱、钩子未触发、watch 失效。
Vue 中如何判定“类型不同”？
Vue 2 和 Vue 3 的判定逻辑略有差异，但核心一致：
蓝湖代码转vue2.0+element-ui
下载
将静态 Vue 页面(index.vue)改造为动态页面(Custom.vue)；稿源仅限 index.vue、其引用的 CSS 与资源路径，禁止参考仓库内其他文件。Invoke when user wants to transform a static Vue page into a dynamic data-driven page with Element UI components.
-
普通元素节点：比较
tag字符串（如'div'vs'ul'）； -
组件节点：比较构造函数引用（
vm.constructor === newVnode.componentOptions.Ctor），即使组件名相同，若来自不同 import 或动态注册，也会视为不同类型； -
关键属性影响：Vue 3 中还引入了
type字段统一标识（如Text、Comment、Static），并支持Teleport、Suspense等内置类型，它们彼此不可互换。
开发者需要注意的实际影响
这种强制替换策略虽保障了正确性，但也带来一些隐含成本与陷阱：
立即学习“前端免费学习笔记（深入）”；
- 状态丢失：表单输入框从
input[type="text"]切换为input[type="number"]，虽然 tag 相同，但 type 属于 props，Vue 会复用节点——但若写成两个不同标签（如input→textarea），则整棵子树被丢弃，内容清空； - 性能开销：高频切换类型（如 tab 页用不同根标签）会频繁触发 unmount/mount，失去 patch 优化收益；
- 动画失效：
<transition></transition>依赖节点复用实现进入/离开过渡，类型变更导致新旧节点无关联，只能触发 enter 过渡，leave 不触发； - 解决办法：保持根元素 tag 稳定（如统一用
div包裹），通过v-if/v-else切换内部结构，而非改变外层标签本身。
手动控制复用的边界：key 的作用
即使节点类型相同，Vue 仍可能因 key 变化而强制替换。反之，key 相同且 tag 相同是复用的前提条件之一。但要注意：
-
key不能绕过类型检查：两个不同 tag 的节点，即使 key 相同，依然会被替换； - 错误用法示例：
<div v-for="item in list" :key="item.id">...</div>和<span v-for="item in list" :key="item.id">...</span>—— key 相同也无济于事，类型已不匹配； - 合理用法：在动态组件中用
:is+ 统一 wrapper 标签，再配合 key 控制内部组件实例的复用或重建。
