文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

vue怎么实现diff算法

2024-04-02 19:55

关注

这篇文章主要介绍“vue怎么实现diff算法”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“vue怎么实现diff算法”文章能帮助大家解决问题。

模块路径:src\core\vdom\patch.js

问题:diff算法主要是对相同节点的子节点进行的比较和更新,也就是相同级别节点的比较算法。dom对比更新,本着尽量减少dom的销毁和重建,所以diff算法尽量先移动,后增删

过程分析

比较旧VNode节点oldCh和新VNode节点newCh,创建四个索引进行比较:

两个索引oldStartIdx(旧VNode开始位置)和oldEndIdx(旧VNode结束位置)分别指向oldCh的开始和结束下标

两个索引newStartIdx(新VNode开始位置)和newEndIdx(新VNode开始位置)分别指向newCh的开始和结束下标

并创建四个索引位置对应的VNode节点oldStartVnode,oldEndVnode,newStartVnode,newEndVnode,代码如下:

     let oldStartIdx = 0

    let newStartIdx = 0

    let oldEndIdx = oldCh.length - 1

    let oldStartVnode = oldCh[0]

    let oldEndVnode = oldCh[oldEndIdx]

    let newEndIdx = newCh.length - 1

    let newStartVnode = newCh[0]

    let newEndVnode = newCh[newEndIdx]

    let oldKeyToIdx, idxInOld, vnodeToMove, refElm

根据索引遍历节点   while(oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx):

首先是异常情况判断,然后根据当前节点情况判断是否以下四种情况

if (isUndef(oldStartVnode)) {undefined

        oldStartVnode = oldCh[++oldStartIdx] // Vnode has been moved left

      } else if (isUndef(oldEndVnode)) {undefined

        oldEndVnode = oldCh[--oldEndIdx]

 }

遍历判断1: 如果oldStartIdx的节点和newStartIdx节点相同,去patchVnode判断节点内部是否相同,oldStartIdx++,newStartIdx++     (patchVnode是详细比较两个节点内容的函数)

else if (sameVnode(oldStartVnode, newStartVnode)) {undefined

   // 两个节点相同,直接将该VNode节点进行patchVnode

   patchVnode(oldStartVnode, newStartVnode, insertedVnodeQueue, newCh, newStartIdx)

   oldStartVnode = oldCh[++oldStartIdx]

    newStartVnode = newCh[++newStartIdx]

 }

遍历判断2: 如果oldEndIdx的节点和newEndIdx节点相同,去patchVnode判断节点内部是否相同,oldEndIdx--,newEndIdx--

else if (sameVnode(oldEndVnode, newEndVnode)) {undefined

        // 两个节点相同,直接将该VNode节点进行patchVnode

        patchVnode(oldEndVnode, newEndVnode, insertedVnodeQueue, newCh, newEndIdx)

        oldEndVnode = oldCh[--oldEndIdx]

        newEndVnode = newCh[--newEndIdx]

 }

遍历判断3: 如果oldStartIdx的节点和newEndIdx节点相同,去patchVnode判断节点内部是否相同,oldStartIdx++,newEndIdx--,把oldStartIdx对应节点向右移动

else if (sameVnode(oldStartVnode, newEndVnode)) { // Vnode moved right

        // 进行patchVnode,把oldStartVnode移到最后

       patchVnode(oldStartVnode, newEndVnode, insertedVnodeQueue, newCh, newEndIdx)

       //canMove移动oldStartVnode节点到oldEndVnode后面

        canMove && nodeOps.insertBefore(parentElm, oldStartVnode.elm, nodeOps.nextSibling(oldEndVnode.elm))

        oldStartVnode = oldCh[++oldStartIdx]

        newEndVnode = newCh[--newEndIdx]

      }

遍历判断4: 如果oldEndIdx的节点和newStartIdx节点相同,去patchVnode判断节点内部是否相同,oldEndIdx--,newStartIdx++,把oldEndIdx对应节点向左移动

else if (sameVnode(oldEndVnode, newStartVnode)) { // Vnode moved left

        // oldEndVnode 和 newStartVnode相同,进行patchVnode

        patchVnode(oldEndVnode, newStartVnode, insertedVnodeQueue, newCh, newStartIdx)

        //,把oldEndVnode 移动到最前面

       canMove && nodeOps.insertBefore(parentElm, oldEndVnode.elm, oldStartVnode.elm)

        oldEndVnode = oldCh[--oldEndIdx]

        newStartVnode = newCh[++newStartIdx]

      }

遍历判断5: 如果上述四种情况都不存在,则用新VNode当前的newStartVnode去旧VNode里找(尽量不新建dom,找到了就移动,找不到再新建)

如果找到了,则调用patchVnode去比较详细内容,并且移动这个节点到newStartIdx位置,

如果没找到,则创建新节点并插入

else {undefined

        // 以上四种情况都不满足

        // newStartVnode依次和旧的节点进行比较

        // 从新的节点开通取一个,去老节点中查找相同节点

        // 先找新开始节点的key和老节点相同的索引,如果没找到再通过sameVnode找

        if (isUndef(oldKeyToIdx)) oldKeyToIdx = createKeyToOldIdx(oldCh, oldStartIdx, oldEndIdx)

        idxInOld = isDef(newStartVnode.key)

          ? oldKeyToIdx[newStartVnode.key]

          : findIdxInOld(newStartVnode, oldCh, oldStartIdx, oldEndIdx)

          // 如果没找到,创建节点并插入到最前面

        if (isUndef(idxInOld)) { // 没找到 New element

          createElm(newStartVnode, insertedVnodeQueue, parentElm, oldStartVnode.elm, false, newCh, newStartIdx)

        } else { //找到了  获取要移动的老节点

          vnodeToMove = oldCh[idxInOld]

          if (sameVnode(vnodeToMove, newStartVnode)) {undefined

            // 两节点相同,执行patchVnode

            patchVnode(vnodeToMove, newStartVnode, insertedVnodeQueue, newCh, newStartIdx)

            oldCh[idxInOld] = undefined

             //并将找到的旧节点移动到最前面

            canMove && nodeOps.insertBefore(parentElm, vnodeToMove.elm, oldStartVnode.elm)

          } else {// 两节点不同,创建新元素

            createElm(newStartVnode, insertedVnodeQueue, parentElm, oldStartVnode.elm, false, newCh, newStartIdx)

          }

        }

        newStartVnode = newCh[++newStartIdx]//移动索引

      }

 遍历完成(走出while循环时说明肯定有新/旧节点被遍历完了):

结束判断1:当结束时 oldStartIdx > oldEndIdx ,说明旧节点遍历完了,新节点没遍历完,则说明新节点比老节点多,把newStartIdx >到newEndIdx直接的节点插入到老节点后面

结束判断2:当结束时 newStartIdx > newEndIdx ,说明新节点遍历完了,旧节点没遍历完,则说明老节点比新节点多,把的oldStartIdx到oldEndIdx之间的节点删除

关于“vue怎么实现diff算法”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识,可以关注编程网行业资讯频道,小编每天都会为大家更新不同的知识点。

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯