Vue3、 Vue2 Diff算法比较

Vue2 Diff算法

源码位置:src/core/vdom/patch.ts

源码所在函数:updateChildren()

源码讲解:

  • 有新旧两个节点数组:oldChnewCh

  • 有下面几个变量:

    oldStartIdx 初始值=0

    oldStartVnode 初始值=oldCh[0]

    oldEndIdx 初始值=oldCh.length - 1

    oldEndVnode 初始值=oldCh[oldEndIdx]

    newStartIdx 初始值=0

    newStartVnode 初始值=newCh[0]

    newEndIdx 初始值=newCh.length - 1

    newEndVnode. 初始值=newCh[newEndIdx]

  • 对比流程

  1. 新旧数组,从首到尾对比,直到Vnode不相同

图片

 2. 新旧数组,从尾到首对比,直到Vnode不相同

图片

 3. 旧数组尾和新数组首对比,直到Vnode不同

图片

 4. 旧数组首和新数组尾对比,直到Vnode不同

图片

 前面4步对比完成后,会有下面三种情况:

(1)旧数组没有剩余元素

图片

针对这种情况,直接将新数组中新增的元素插入到元素6后面

(2)新数组没有剩余元素

相关推荐

  1. vuediff算法

    2024-04-26 03:36:03       31 阅读

最近更新

  1. TCP协议是安全的吗?

    2024-04-26 03:36:03       18 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2024-04-26 03:36:03       19 阅读
  3. 【Python教程】压缩PDF文件大小

    2024-04-26 03:36:03       18 阅读
  4. 通过文章id递归查询所有评论(xml)

    2024-04-26 03:36:03       20 阅读

热门阅读

  1. 00_Linux

    00_Linux

    2024-04-26 03:36:03      11 阅读
  2. 0053__Linux----tr命令详细使用方法

    2024-04-26 03:36:03       8 阅读
  3. Linux下文件内容更新了文件夹时间戳却没变?

    2024-04-26 03:36:03       12 阅读
  4. Spring中事务的几种失效场景

    2024-04-26 03:36:03       12 阅读
  5. 如何看待AIGC技术?【模板】

    2024-04-26 03:36:03       12 阅读