面试官：说说vue的diff算法

最新推荐文章于 2025-02-20 14:20:13 发布

java涛仔

最新推荐文章于 2025-02-20 14:20:13 发布

阅读量1k

点赞数

文章标签：前端 java 开发语言程序人生架构

本文链接：https://blog.youkuaiyun.com/qq_64513388/article/details/122419630

版权

本文探讨了Vue中视图更新的关键——Diff算法。通过源码分析和举例说明，揭示了Diff如何比较新旧节点以实现高效更新。当面试中被问及此问题时，应解释其核心逻辑，包括节点的匹配、指针移动策略以及特殊情况处理。同时指出，Vue的Diff算法采用深度优先遍历策略。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

背景

在vue中，视图更新的diff算法在面试过程中算是常被问及的一个问题，那么它到底是什么？我们应该怎么回答啊。

源码分析

这里我先贴一下diff算法的核心代码

... 
// isUndef 判断是否为undefined 
// oldCh 旧节点列表
// newCh 新节点列表
// sameVnode 判断是否是相同的节点，判断key值，标签，data等等东西 
while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {
  if (isUndef(oldStartVnode)) {
        oldStartVnode = oldCh[++oldStartIdx] // Vnode has been moved left
      } else if (isUndef(oldEndVnode)) {
        oldEndVnode = oldCh[--oldEndIdx]
        
      }
  // 从这里开始 进行新旧开始结束节点的两两判断
  else if (sameVnode(oldStartVnode, newStartVnode)) {
        patchVnode(oldStartVnode, newStartVnode, insertedVnodeQueue, newCh, newStartIdx)
        oldStartVnode = oldCh[++oldStartIdx]
        newStartVnode = newCh[++newStartIdx]
      } else if (sameVnode(oldEndVnode, newEndVnode)) {
        patchVnode(oldEndVnode, newEndVnode, insertedVnodeQueue, newCh, newEn