key必须语义唯一，不能用index；diff只做同层比较，避免跨层级移动；静态内容应标记以减少diff范围；高频更新场景需绕过响应式开销。
虚拟 DOM 的 diff 实现不是为了替代开发者思考，而是把“怎么更新 DOM”这件事封装成可预测、可干预的机制。对开发者来说，关键不在于理解算法细节，而在于明白哪些行为会触发低效 diff，哪些写法能帮框架做出更优决策。
key 必须语义唯一，不能用 index
用 v-for 渲染列表时，key 是 diff 的锚点。如果用数组索引（:key="index"），插入、删除或排序操作会让相同位置的节点被复用，导致输入框失焦、状态错乱、动画中断。比如用户在第 3 项输入文字，删掉第 1 项后，原第 3 项变成第 2 项，但 Vue 仍把它当作“同一个节点”复用——实际是另一个数据项，输入内容就丢了。
应始终使用稳定、唯一、与业务相关的标识，如 :key="item.id" 或 :key="item.uuid"。这样 diff 才能准确识别“谁是谁”，实现元素身份的跨渲染一致。
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
避免跨层级移动，模板结构要稳定
Vue 和 React 的 diff 默认只做同层比较，不跨级查找。比如把一个 div 从父节点 A 移到父节点 B，框架不会“搬运”它，而是直接销毁再重建。这会导致状态丢失、组件重新初始化、ref 失效等问题。
开发中应保持模板层级逻辑清晰： - 不在条件分支里随意嵌套不同结构的子树 - 避免用 v-if 和 v-for 同级共用（易引发渲染顺序歧义） - 动态组件切换时，优先用 keep-alive 缓存实例，而非反复销毁重建
静态内容尽量标记，减少 diff 范围
不会随数据变化的内容，就是 diff 的“噪音”。Vue 编译器能识别 v-once 或编译期判定的静态节点，跳过比对；React 中可用 React.memo 或 useMemo 配合 props 稳定性控制子树更新。
实践中可： - 把大段不变的 HTML 提取为独立组件并加 v-once - 列表项中固定文案、图标等用常量或 computed 缓存，避免每次渲染都重新生成 vnode - 对深层嵌套对象，只响应真正用到的字段，避免未读属性触发无意义更新
高频更新场景需主动绕过响应式开销
实时图表、滚动日志、协作光标等每秒多次变更的数据，若走完整响应式 + diff 流程，会堆积大量 vnode 创建与比对任务，造成卡顿。
可行方案包括： - 使用 shallowRef 或 markRaw 跳过响应式追踪，手动调用 forceUpdate 或控制 patch 时机 - 用 requestIdleCallback 批量合并更新，降低主线程压力 - 超长列表启用虚拟滚动，让 diff 始终只处理可视区域的几十个节点，而非数千项
