Appearance
虚拟 DOM、Block Tree 与 key：Vue 更新优化的真实基础
主题边界
- Vue 的更新优化不只是“有虚拟 DOM”，而是编译器和运行时一起缩小 patch 范围。
key不只是唯一标识，而是节点身份稳定性与复用策略的输入。
机制与流程
- 模板编译阶段会生成 Block Tree 和 PatchFlags，把真正可能变化的动态子节点标出来。
- patch 阶段会根据节点类型、shapeFlag、patchFlag 和 key 决定是复用、移动、卸载还是重新创建。
- 列表 diff 通常会结合头尾指针和最长递增子序列减少移动成本。
关键差异
- 没有 key 时，运行时更偏向按位置复用；有稳定 key 时，更容易保持组件和 DOM 实例身份。
- Vue 3 的编译优化比 Vue 2 更积极，更新时能跳过更多静态节点。
边界条件
- 把 index 当 key 会在插入、排序和删除场景下制造状态错位问题。
- 随机 key 会让节点反复被销毁重建，直接抵消复用收益。
工程落点
- 列表性能、表单状态错位和组件缓存失效，很多都能回到 key 和节点身份上解释。
- 能把 Block Tree、PatchFlags 和 key 串起来，说明已经从 compiler / runtime 层理解 Vue 更新机制。