Vue3 Diff

与Vue2的核心区别

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

Vue3 diff的优化点

1. 静态标记（PatchFlags）：只对比动态节点。Vue3在编译阶段回对模拟中的节点进行分析，为‘动态节点‘（如变量、指令、事件的节点）添加patchflag，静态节点（内容固定不变）则无标记。 如<div></div>会标记PatchFlag.TEXT。作用：diff是会跳过所有无标记的静态节点。

2. 静态提升（HoistStatic）：减少重复创建虚拟节点。对于完全静态的节点，编译时会提升到渲染函数外，仅首次渲染创建一次，后续不在重复创建。

3. 列表diff优化：基于”最长递增子序列“减少DOM移动。vue2采用双指针，在列表元素增删或者重排是，可能会进行较多不必要的DOM移动。 核心逻辑：找到不需要移动的元素列表LIS,仅移动其他元素，最大限度减少DOM操作。

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

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

Vue3 Diff的执行过程

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

总结

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