节点复用率是前端工程中衡量Diff算法效能的经验指标，指更新中被patch复用的子vnode数占参与Diff的子vnode总数的比例，反映DOM是否被有效节省。
节点复用率不是 Vue 官方定义的指标，而是前端工程中用于衡量 Diff 算法实际效能的经验性量化指标：它指在一次组件更新中，被 patch 复用（而非销毁重建）的子 vnode 数量，占所有参与 Diff 的子 vnode 总数的比例。
为什么这个指标关键？
复用率直接反映 DOM 元素是否被真正“节省”——高复用率意味着更少的 createElement、appendChild、removeChild 操作，从而规避重排重绘、保留输入框焦点、维持过渡动画连贯性、避免组件状态丢失。反之，低复用率往往暴露 key 设计或列表变更模式的问题。
如何量化计算？
你不需要改源码，只需在 patch 过程中轻量拦截并统计。推荐在开发环境启用自定义性能钩子：
- 在
patch函数入口（如重写renderer.patch或使用app.config.compilerOptions注入调试逻辑）添加计数器 - 当
oldVNode和newVNode满足sameVnode(old, new) === true且oldVNode.el !== null（即真实 DOM 存在），记为一次有效复用 - 对每个有子节点的更新，记录：
•reusedCount（复用 vnode 数）
•totalComparedCount（进入 Diff 的子 vnode 总数，含新增/删除）
→ 复用率 =reusedCount / totalComparedCount
例如一个 10 项列表插入 1 项头部：若旧尾 9 个节点全部复用，新头 1 个新建，则复用率为 90%；若 key 全用 index，则可能只有尾部 1–2 个匹配，复用率跌至 10%–20%。
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
立即学习“前端免费学习笔记（深入）”；
影响复用率的三大硬性因素
复用率不是越高越好，而是要“该复用时一定复用”。以下三类问题会显著拉低它：
-
key 缺失或失效：v-for 不写 key、key 为
Math.random()或index→ Vue 退化为顺序比对，位置偏移即触发全量替换 -
节点类型不一致：同 key 下从
<div>变为<span>→ 不满足sameVnode判定，强制替换而非 patch -
动态组件切换未带 key：
<component :is="tab">缺 key → 组件实例被就地复用，状态残留；加:key="tab"后虽降低单次复用率（强制重建），但提升的是业务正确性，属于合理下降
健康范围参考（基于中等复杂度业务项目）
日常局部更新（如搜索结果刷新、分页加载）：
• 正常区间：75% – 95%
• 预警线：持续低于 60%（检查 key 稳定性与列表变更方式）
• 异常值：接近 0%（如全列表 key 冲突或全用 index）→ 必须修复
注意：首次挂载无旧节点，复用率为 0%，属正常；服务端渲染首屏 hydration 也不计入此统计。
