diff算法本身不决定渲染速度，真正影响性能的是patch阶段的dom操作深度和范围；通过稳定key、虚拟滚动、patchflags优化及避免嵌套响应式结构可显著提升移动端列表性能。
Diff 算法在移动端高性能列表中，本身不决定渲染速度，真正影响性能的是 Patch 阶段的 DOM 操作深度和范围。减少 Patch 深度，核心是让 Diff 后的更新只落在“必要节点”上，避免递归遍历整棵子树或触发深层重绘。
用稳定 key 锁定可复用节点，跳过属性比对
移动端 DOM 操作成本高，频繁 patch 属性（如 style、class、text）会触发重排重绘。若每行使用 row.id 作为 key，Diff 能准确识别“同一行只是换了位置”，Vue/React 就只执行 moveNode 操作——即仅调整 DOM 物理顺序，完全跳过所有属性 diff 和 patch 过程。反之，若用 :key="index"，拖拽后索引错位，框架误判为全量替换，导致大量无意义的 patch 属性和重建文本节点。
配合虚拟滚动，把 Patch 范围压缩到可视区
即使 Diff 很快，若待 patch 的 vnode 列表长达万行，Patch 函数仍需遍历、比对、调用 updateChildComponent 等深层逻辑。虚拟滚动（如 RecycleScroller 或 react-window）通过只生成当前可视区域 + 缓冲区的几十个 vnode，使 Diff 输入规模从 N 缩减到 ~30–50。Patch 函数实际只处理这几十个节点，深度自然受限，且不会触达不可见行的子组件生命周期或样式计算。
利用 patchFlags 提前剪枝，避免无效 patch
Vue 3 编译器会在模板中注入 patchFlag，标记哪些 vnode 属性是静态的（如列标题文字）、哪些是动态的（如 {{ row.name }}）。当某行 vnode 的 patchFlag 显示“仅 text 变化”，Patch 函数就直接跳过 class、style、事件绑定等比对逻辑，直奔 innerText 更新。这种编译期优化让每次 patch 的调用栈深度显著变浅，尤其适合移动端 JS 主线程紧张的场景。
避免嵌套响应式结构，切断深层 patch 链路
若表格每行内部再渲染一个子列表（如展开详情），且该子列表也依赖响应式数组，一次父级排序可能触发多层 Diff + Patch。应将子内容设为惰性加载，或用 shallowRef / markRaw 隔离非关键响应式数据，确保 Patch 不向下穿透进不需要实时更新的深层结构。
