虚拟DOM的Diff算法通过精准定位变更、同层比较、双端遍历和key机制，将DOM更新从粗放重绘转为最小化微调，显著提升交互响应速度与流畅度。
虚拟 DOM 的 diff 实现对交互性能的影响，核心在于它把“改哪里、怎么改”这件事从粗放式重绘变成了精准式微调。不是每次状态变都刷整个列表或区域，而是只动真正变化的节点——这直接决定了用户点击、输入、滚动时的响应是否跟手、是否卡顿。
减少重排重绘次数
真实 DOM 操作会触发浏览器 layout（重排）和 paint（重绘），开销大且不可控。diff 算法确保 Vue 只在必要时更新真实 DOM，并且尽可能批量、最小化地提交变更。比如一个 100 项的列表中新增一项，diff 能识别出仅需插入一个
key 是 diff 准确性的关键开关
没有 key 或 key 不唯一时，Vue 默认按索引比对，容易误判节点复用关系，导致组件状态错乱或不必要重建。加上稳定唯一的 key（如 id），diff 才能正确追踪每个节点身份，实现： - 新增项只插入，不扰动已有项 - 删除项只移除，其余节点保持实例和状态 - 顺序调整时复用节点，仅移动真实 DOM 位置
同层比较大幅降低计算成本
diff 不跨层级递归比对整棵树，而是逐层收敛处理。这意味着： - 子树结构变化不会引发父级或兄弟节点的无谓比对 - 即使深层组件更新，diff 时间复杂度也基本维持在线性 O(n) 级别 - 避免了传统树对比算法可能带来的 O(n³) 开销，保障高频交互下的稳定性
双端遍历加速列表首尾操作
对常见场景（如聊天消息追加、顶部刷新、底部加载）特别友好： - 新消息插入末尾 → 尾部指针快速匹配，几乎零比对即完成挂载 - 顶部下拉刷新 → 头部指针命中，旧头节点被复用或卸载，新头节点精准插入 - 中间变动才进入更细致的 key 映射与最长递增子序列（LIS）计算
