无效 patch 是指新旧 vnode 完全一致却仍触发完整比对与 dom 操作的冗余更新，源于响应式浅层更新、计算属性无变化返回、props 透传未防护或 key 不稳定，导致性能浪费。

“无效 Patch”不是指语法错误或无法编译的补丁，而是指在虚拟 DOM 更新过程中，新旧 VNode 节点之间**实际属性、子节点或结构完全一致**，却仍被 Vue 的 patch 算法触发完整比对与 DOM 操作的情形。这种 patch 不产生任何真实变更，却消耗 CPU、触发不必要的渲染流程，属于可避免的性能冗余。

为什么会出现无效 Patch？

常见诱因包括：

• 响应式数据浅层更新：对象引用未变，仅内部属性值重复赋相同值（如 obj.count = obj.count）；
• 计算属性无变化返回：computed 依赖未变，但函数体执行后仍返回相同结果，Vue 默认无法跳过其副作用触发；
• props 深层传递未变：父组件向子组件透传一个大型对象，子组件 props 接收后未做浅层/深层 diff 防御，导致每次父组件重渲染都触发子组件 patch；
• key 使用不当：列表中 key 值动态生成（如 :key="index"），数组顺序微调即引发整块重排，即使内容未变。

如何识别无效 Patch？

关键看三类信号：

• DevTools 中 patch 耗时低但频次高：Vue Devtools 的 Performance 面板里，大量 patch 操作耗时均在 0.1ms 以内，且无 style/class/text 变更记录；
• DOM 元素属性/内容无变化：对比前后元素快照（Elements 面板右键 → “Copy outerHTML”），发现完全一致；
• watch 或 onUpdated 中日志频繁触发但状态未变：例如监听某个 ref，打印其值发现连续多次输出相同对象或原始值。

减少无效 Patch 的实用方法

核心思路是：让 Vue 在比对前就“知道无需更新”。

• 用 shallowRef 或 markRaw：对不需响应式的大型静态配置对象、第三方库实例，避免被 proxy 包裹，从源头消除无意义触发；
• props 透传加 v-bind.sync 或解构防御：子组件用 defineProps({ config: Object as PropType<config> })</config> 并配合 watch(config, ... , { deep: false }) 控制响应粒度；
• 列表 key 确保稳定唯一：优先用数据本身的 id 字段，而非 index 或 Math.random()；
• 计算属性加缓存断言：对确定性函数，可用 computed(() => { const val = expensiveFn(); return isSame(prevVal, val) ? prevVal : (prevVal = val); }) 手动短路（谨慎使用，适用于极高频场景）。

无效 Patch 不影响功能正确性，但会悄悄拖慢长列表滚动、高频表单输入等交互场景。识别它不需要复杂工具，靠 DevTools + 逻辑判断就能定位；减少它也不依赖黑科技，关键是理解响应式触发边界和 patch 的前置条件。