Vue3 Diff

与Vue2的核心区别

Vue2的diff是“全量对比”，无论节点是否动态，都会递归遍历整个虚拟DOM树比较，而Vue3的Diff引入编译时优化和靶向更新，只针对”动态节点“对比

Vue3 diff的优化点

静态标记（PatchFlags）：只对比动态节点。Vue3在编译阶段回对模拟中的节点进行分析，为‘动态节点‘（如变量、指令、事件的节点）添加patchflag，静态节点（内容固定不变）则无标记。如<div></div>会标记PatchFlag.TEXT。作用：diff是会跳过所有无标记的静态节点。
静态提升（HoistStatic）：减少重复创建虚拟节点。对于完全静态的节点，编译时会提升到渲染函数外，仅首次渲染创建一次，后续不在重复创建。
列表diff优化：基于”最长递增子序列“减少DOM移动。vue2采用双指针，在列表元素增删或者重排是，可能会进行较多不必要的DOM移动。核心逻辑：找到不需要移动的元素列表LIS,仅移动其他元素，最大限度减少DOM操作。

举例：列表从 [a,b,c,d]变成[b,a,d,c], LIS [b,d]，只需移动a和c，比Vue2高效。

非props attrs处理优化对于组件上的非props属性（class、style或者自定义属性），Vue3会在diff时批量处理，而非逐个对比，减少属性更新的开销。

Vue3 Diff的执行过程

编译阶段：分析模版，标记动态节点PatchFlag，提升静态节点。
更新阶段：
- 生成新的vdom（仅动态节点有变化）
- 对比新旧，通过PatchFlag跳过静态，只处理动态
- 对比列表，用最长递增子序列计算最小移动次数，高效更新DOM。

总结

优化核心是编译时标记动态内容，运行只更新必要部分