企业官网建设流程全解析

一句话概括Vue2 和 Vue3 的 diff 算法区别

Vue2 和 Vue3 的 diff 算法核心区别在于优化策略和数据粒度，Vue3 通过编译时优化实现了更精确的靶向更新。

Vue2 的 diff 算法（双端比较）

1. 递归同层比较：深度优先，逐层比较
2. 双端指针：新旧子序列使用4个指针（旧头、旧尾、新头、新尾）进行4种比较
3. 无 key 时全量比对：通过遍历查找可复用节点，性能较差
4. 全量差异比对：即使静态节点也会在每次更新时比较

Vue3 的 diff 算法（快速路径 + 最长递增子序列）

1. patchFlag 标记：编译时标记动态节点类型，更新时跳过静态节点
2. block 树：收集动态子节点，形成更新区块，减少遍历范围
3. 最长递增子序列优化：对有 key 的子序列，使用贪心+二分查找 LIS，最小化移动操作
4. 缓存事件处理函数：避免不必要的重新渲染

核心区别对比

关键改进点

1. 编译信息利用：Vue3 通过编译时分析，为运行时提供优化线索
2. 静态提升：将静态节点提升到渲染函数外，避免重复创建
3. 靶向更新：根据 patchFlag 只更新变化的属性，而非整个 VNode
4. 缓存优化：对事件处理器、插槽内容等进行缓存

一句话概括：Vue3 通过编译时标记 + 靶向更新，实现了从“全量递归比对”到“精准按需更新”的进化，显著减少了不必要的比较操作。