Vue源码解析：虚拟DOM加Differ算法之一锤定音（二）

最新推荐文章于 2024-07-09 01:28:37 发布
最新推荐文章于 2024-07-09 01:28:37 发布
阅读量309 收藏 2
点赞数 1
分类专栏： Vue 文章标签： javascript es6 vue.js typescript html5
lee前端技术站
本文链接：https://blog.csdn.net/leelxp/article/details/106975904
版权

上一章，我们讲过了虚拟DOM和diff算法，但是当新旧VNode中如果还有子节点的时候，就是一个比较繁琐的过程，所以我们还是拿出来单说一下。

我们说过，如果新的VNode中有某个节点，而旧的VNode中没有，那么我们旧新增，如果新的VNode中没有，而旧的VNode中有，那么就将旧的VNode删除，如果新VNode中有，旧的VNode中也有，但是位置不同，那么就要移动VNode,如果新旧Vnode的位置也相同，那么旧更新。

// 源码位置： /src/core/vdom/patch.js

if (isUndef(idxInOld)) {    // 如果在oldChildren里找不到当前循环的newChildren里的子节点
    // 新增节点并插入到合适位置
    createElm(newStartVnode, insertedVnodeQueue, parentElm, oldStartVnode.elm, false, newCh, newStartIdx)
} else {
    // 如果在oldChildren里找到了当前循环的newChildren里的子节点
    vnodeToMove = oldCh[idxInOld]
    // 如果两个节点相同
    if (sameVnode(vnodeToMove, newStartVnode)) {
        // 调用patchVnode更新节点
        patchVnode(vnodeToMove, newStartVnode, insertedVnodeQueue)
        oldCh[idxInOld] = undefined
        // canmove表示是否需要移动节点，如果为true表示需要移动，则移动节点，如果为false则不用移动
        canMove && nodeOps.insertBefore(parentElm, vnodeToMove.elm, oldStartVnode.elm)
    }
}

以上就是新旧VNode比对的结果。

但是，我们知道，所有的子节点，都是放在一个children数组中，如果要比对新旧VNode，方法就必然是双层遍历。这在性能上肯定是不可取的，那么如和解决这一性能问题呢？

// 循环更新子节点
  function updateChildren (parentElm, oldCh, newCh, insertedVnodeQueue, removeOnly) {
    let oldStartIdx = 0               // oldChildren开始索引
    let oldEndIdx = oldCh.length - 1   // oldChildren结束索引
    let oldStartVnode = oldCh[0]        // oldChildren中所有未处理节点中的第一个
    let oldEndVnode = oldCh[oldEndIdx]   // oldChildren中所有未处理节点中的最后一个

    let newStartIdx = 0               // newChildren开始索引
    let newEndIdx = newCh.length - 1   // newChildren结束索引
    let newStartVnode = newCh[0]        // newChildren中所有未处理节点中的第一个
    let newEndVnode = newCh[newEndIdx]  // newChildren中所有未处理节点中的最后一个

    let oldKeyToIdx, idxInOld, vnodeToMove, refElm

    // removeOnly is a special flag used only by <transition-group>
    // to ensure removed elements stay in correct relative positions
    // during leaving transitions
    const canMove = !removeOnly

    if (process.env.NODE_ENV !== 'production') {
      checkDuplicateKeys(newCh)
    }

    // 以"新前"、"新后"、"旧前"、"旧后"的方式开始比对节点
    while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {
      if (isUndef(oldStartVnode)) {
        oldStartVnode = oldCh[++oldStartIdx] // 如果oldStartVnode不存在，则直接跳过，比对下一个
      } else if (isUndef(oldEndVnode)) {
        oldEndVnode = oldCh[--oldEndIdx]
      } else if (sameVnode(oldStartVnode, newStartVnode)) {
        // 如果新前与旧前节点相同，就把两个节点进行patch更新
        patchVnode(oldStartVnode, newStartVnode, insertedVnodeQueue)
        oldStartVnode = oldCh[++oldStartIdx]
        newStartVnode = newCh[++newStartIdx]
      } else if (sameVnode(oldEndVnode, newEndVnode)) {
        // 如果新后与旧后节点相同，就把两个节点进行patch更新
        patchVnode(oldEndVnode, newEndVnode, insertedVnodeQueue)
        oldEndVnode = oldCh[--oldEndIdx]
        newEndVnode = newCh[--newEndIdx]
      } else if (sameVnode(oldStartVnode, newEndVnode)) { // Vnode moved right
        // 如果新后与旧前节点相同，先把两个节点进行patch更新，然后把旧前节点移动到oldChilren中所有未处理节点之后
        patchVnode(oldStartVnode, newEndVnode, insertedVnodeQueue)
        canMove && nodeOps.insertBefore(parentElm, oldStartVnode.elm, nodeOps.nextSibling(oldEndVnode.elm))
        oldStartVnode = oldCh[++oldStartIdx]
        newEndVnode = newCh[--newEndIdx]
      } else if (sameVnode(oldEndVnode, newStartVnode)) { // Vnode moved left
        // 如果新前与旧后节点相同，先把两个节点进行patch更新，然后把旧后节点移动到oldChilren中所有未处理节点之前
        patchVnode(oldEndVnode, newStartVnode, insertedVnodeQueue)
        canMove && nodeOps.insertBefore(parentElm, oldEndVnode.elm, oldStartVnode.elm)
        oldEndVnode = oldCh[--oldEndIdx]
        newStartVnode = newCh[++newStartIdx]
      } else {
        // 如果不属于以上四种情况，就进行常规的循环比对patch
        if (isUndef(oldKeyToIdx)) oldKeyToIdx = createKeyToOldIdx(oldCh, oldStartIdx, oldEndIdx)
        idxInOld = isDef(newStartVnode.key)
          ? oldKeyToIdx[newStartVnode.key]
          : findIdxInOld(newStartVnode, oldCh, oldStartIdx, oldEndIdx)
        // 如果在oldChildren里找不到当前循环的newChildren里的子节点
        if (isUndef(idxInOld)) { // New element
          // 新增节点并插入到合适位置
          createElm(newStartVnode, insertedVnodeQueue, parentElm, oldStartVnode.elm, false, newCh, newStartIdx)
        } else {
          // 如果在oldChildren里找到了当前循环的newChildren里的子节点
          vnodeToMove = oldCh[idxInOld]
          // 如果两个节点相同
          if (sameVnode(vnodeToMove, newStartVnode)) {
            // 调用patchVnode更新节点
            patchVnode(vnodeToMove, newStartVnode, insertedVnodeQueue)
            oldCh[idxInOld] = undefined
            // canmove表示是否需要移动节点，如果为true表示需要移动，则移动节点，如果为false则不用移动
            canMove && nodeOps.insertBefore(parentElm, vnodeToMove.elm, oldStartVnode.elm)
          } else {
            // same key but different element. treat as new element
            createElm(newStartVnode, insertedVnodeQueue, parentElm, oldStartVnode.elm, false, newCh, newStartIdx)
          }
        }
        newStartVnode = newCh[++newStartIdx]
      }
    }
    if (oldStartIdx > oldEndIdx) {
      /**
       * 如果oldChildren比newChildren先循环完毕，
       * 那么newChildren里面剩余的节点都是需要新增的节点，
       * 把[newStartIdx, newEndIdx]之间的所有节点都插入到DOM中
       */
      refElm = isUndef(newCh[newEndIdx + 1]) ? null : newCh[newEndIdx + 1].elm
      addVnodes(parentElm, refElm, newCh, newStartIdx, newEndIdx, insertedVnodeQueue)
    } else if (newStartIdx > newEndIdx) {
      /**
       * 如果newChildren比oldChildren先循环完毕，
       * 那么oldChildren里面剩余的节点都是需要删除的节点，
       * 把[oldStartIdx, oldEndIdx]之间的所有节点都删除
       */
      removeVnodes(parentElm, oldCh, oldStartIdx, oldEndIdx)
    }
  }

且看Vue是怎么做的？

Vue将新旧俩组children节点数组，声明了oldStartIdx，oldEndIdx，newStartIdx，newEndIdx四个变量，采用俩个数组从俩边向中间循环的方式。

（1）如果oldStartVnode不存在，则直接跳过，将oldStartIdx加1，比对下一个

// 以"新前"、"新后"、"旧前"、"旧后"的方式开始比对节点
while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {
	if (isUndef(oldStartVnode)) {
        oldStartVnode = oldCh[++oldStartIdx]
      }
}

（2）如果oldEndVnode不存在，则直接跳过，将oldEndIdx减1，比对前一个

else if (isUndef(oldEndVnode)) {
    oldEndVnode = oldCh[--oldEndIdx]
}

（3）如果新前与旧前节点相同，就把两个节点进行patch更新，同时oldStartIdx和newStartIdx都加1，后移一个位置

else if (sameVnode(oldStartVnode, newStartVnode)) {
    patchVnode(oldStartVnode, newStartVnode, insertedVnodeQueue)
    oldStartVnode = oldCh[++oldStartIdx]
    newStartVnode = newCh[++newStartIdx]
}

（4）如果新后与旧后节点相同，就把两个节点进行patch更新，同时oldEndIdx和newEndIdx都减1，前移一个位置

else if (sameVnode(oldEndVnode, newEndVnode)) {
    patchVnode(oldEndVnode, newEndVnode, insertedVnodeQueue)
    oldEndVnode = oldCh[--oldEndIdx]
    newEndVnode = newCh[--newEndIdx]
}

（5）如果新后与旧前节点相同，先把两个节点进行patch更新，然后把旧前节点移动到oldChilren中所有未处理节点之后，最后把oldStartIdx加1，后移一个位置，newEndIdx减1，前移一个位置

else if (sameVnode(oldStartVnode, newEndVnode)) {
    patchVnode(oldStartVnode, newEndVnode, insertedVnodeQueue)
    canMove && nodeOps.insertBefore(parentElm, oldStartVnode.elm, nodeOps.nextSibling(oldEndVnode.elm))
    oldStartVnode = oldCh[++oldStartIdx]
    newEndVnode = newCh[--newEndIdx]
}

（6）如果新前与旧后节点相同，先把两个节点进行patch更新，然后把旧后节点移动到oldChilren中所有未处理节点之前，最后把newStartIdx加1，后移一个位置，oldEndIdx减1，前移一个位置

else if (sameVnode(oldEndVnode, newStartVnode)) { // Vnode moved left
    patchVnode(oldEndVnode, newStartVnode, insertedVnodeQueue)
    canMove && nodeOps.insertBefore(parentElm, oldEndVnode.elm, oldStartVnode.elm)
    oldEndVnode = oldCh[--oldEndIdx]
    newStartVnode = newCh[++newStartIdx]
}

如果以上四种都不是就进行常规的循环比对patch。

如果在循环中，oldStartIdx大于oldEndIdx了，那就表示oldChildren比newChildren先循环完毕，那么newChildren里面剩余的节点都是需要新增的节点，把[newStartIdx, newEndIdx]之间的所有节点都插入到DOM中

if (oldStartIdx > oldEndIdx) {
    refElm = isUndef(newCh[newEndIdx + 1]) ? null : newCh[newEndIdx + 1].elm
    addVnodes(parentElm, refElm, newCh, newStartIdx, newEndIdx, insertedVnodeQueue)
}

如果在循环中，newStartIdx大于newEndIdx了，那就表示newChildren比oldChildren先循环完毕，那么oldChildren里面剩余的节点都是需要删除的节点，把[oldStartIdx, oldEndIdx]之间的所有节点都删除

else if (newStartIdx > newEndIdx) {
    removeVnodes(parentElm, oldCh, oldStartIdx, oldEndIdx)
}

这就是vue的子节点新旧VNode对比的过程，也就是所有的vue中VNode的patch的过程，没有看过源码，真的想不到，但是看过源码又会发现，其实也没那么难，所以学习，还得刨根问底。。。。。。

leelxp
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue的diff算法
qq_38713274的博客
03-29 236
数据变化时vue进行节点更新 问题：有时修改了某个数据，如果直接渲染到真实 DOM 上会引起整个 DOM树的重绘和重排。 解决：先根据真实 DOM 生成一颗 virtual DOM，计算 virtual DOM 中节点数据变化的部分，将该部分进行原生 DOM 操作，而不用重新渲染整个页面。 virtual DOM 用 js 对象结构表示 DOM 树的结构，然后用这个树构建一个 真正的 DOM 树，插入到文档当中。当状态变更的时候，重新构造一棵新的对象树。然后用新的树和旧的树进行比较，记录两棵树的差异。把所记
Vue源码解析：虚拟DOM加Differ算法之一锤定音（一）
lee前端技术站
06-25 710
之前我们讲过，Vue的特点之一是数据驱动视图，那么今天我们来讲讲Vue的另一特点虚拟dom。 虚拟Dom基础 1、Vue的虚拟dom是什么？ 简单来讲，Vue的虚拟dom就是一个JavaScript对象，用对象的方式去描述dom的结构。 <div class="a" id="b">我是内容</div> { tag:'div', // 元素标签 attrs:{ // 属性 class:'a',
diff 算法原理及实现
最新发布
weixin_64684095的博客
07-09 298
Diff 算法是用于比较两个虚拟 DOM 树的差异，并以最小的操作代价将旧的 DOM 树更新为新的 DOM 树的一种算法。Diff 算法的高效实现对于提高前端应用的性能和用户体验至关重要，尤其是在频繁更新组件状态导致 DOM 频繁更新的情况下。
vue Diff算法比较过程
cxz
05-10 1040
第一步：patch函数中对新老节点进行比较 如果新节点不存在 就销毁老节点 如果老节点不存在，直接创建新的节点 当两个节点是相同节点的时候，进入 patctVnode 的过程，比较两个节点的内部 第二步：patchVnode函数比较两个虚拟节点内部 如果两个虚拟节点完全相同，返回 当前vnode 的children 不是textNode， 再分成三种情况 - 有新children，没有旧children，创建新的 - 没有新children，有旧children，删除旧的
关于VUE中diff算法详解
(⊙o⊙)…
03-01 1253
一、(Diff)是什么? diff 算法是一种通过同层的树节点进行比较的高效算法 1.1. 特点： 比较只会在同层级进行, 不会跨层级比较 在diff比较的过程中，循环从两边向中间比较 diff 算法的在很多场景下都有应用，在 vue 中，作用于虚拟 dom 渲染成真实 dom 的新旧 VNode 节点比较 二、比较方式 2.1.diff整体策略为：深度优先，同层比较，比较只会在同层级进行, 不会跨层级比较 2.2. 比较的过程中，循环从两边向中间收拢 2.3.举例: 新旧VNo
vue diff算法
block_xu的博客
04-28 3656
vue diff算法 在vue中的实现原理，patch函数、patchVnode、updateChildren、sameVnode函数的介绍
vue 源码解析之虚拟Dom-render
10-16
Vue.js 是一个流行的前端JavaScript框架，它的核心特性之一就是使用虚拟DOM来提高性能和效率。虚拟DOM是Vue在内存中构建的一种数据结构，它模拟了真实的DOM树，允许Vue在更新UI时进行高效的比较和更新操作。 在Vue...
一篇文章带你搞懂Vue虚拟Dom与diff算法
10-14
虚拟DOM（Virtual DOM）和diff算法是现代前端框架的核心技术之一，特别是对于Vue这样的响应式框架来说，它们扮演着至关重要的角色。在介绍Vue的虚拟DOM和diff算法之前，我们首先需要了解什么是虚拟DOM以及为什么需要...
vue源码解析.zip
05-13
本资料"vue源码解析.zip"包含了一份名为"vue.pdf"的文档，预计会详细阐述Vue的核心概念、设计模式以及源码实现。 首先，Vue.js 的核心特性包括双向数据绑定、组件系统、指令系统和虚拟DOM。双向数据绑定通过`v-...
vue-dom-diff:vue 虚拟dom diff算法实现
05-05
Vue中的虚拟DOM Diff算法是其性能优化的关键部分，它使得UI的更新更加高效，避免了不必要的DOM操作。现在我们来深入探讨这个话题。 首先，虚拟DOM是一种抽象层，它模拟了真实DOM的结构，但使用的是JavaScript对象，...
vue的diff算法详解
hans774882968的博客
10-01 484
为什么需要虚拟dom？ 虚拟dom只是一个普通的js对象。 由于每次渲染视图都是先创建vnode，然后用它创建真实DOM插入到页面中，所以可以将上一次渲染视图所创建的vnode缓存起来。之后重新渲染视图，就可以对比oldVnode和vnode，基于新旧差异来更新DOM了。这样可以提升性能。（《深入浅出Vue.js》P55） 源码专有术语一览 新旧虚拟节点在源码里的变量名分别为：vnode和oldVnode。我们以vnode为基准，目标是把dom修改成vnode的样子，并且最小化dom操作次数。 如果
【Vue原理】Diff - 白话版
神仙朱的博客
09-09 370
写文章不容易，点个赞呗兄弟 专注 Vue 源码分享，文章分为白话版和 源码版，白话版助于理解工作原理，源码版助于了解内部详情，让我们一起学习吧 研究基于 Vue版本 【2.5.17】 如果你觉得排版难看，请点击 下面链接 或者 拉到 下面关注公众号也可以吧 【Vue原理】Diff - 白话版 终于到了最后一块内容了！今天我们就来简单概括一下 Diff，内容一点都不多哦，全是图片 ...
vue diff算法详解
青梅煮酒论英雄的博客
05-01 887
前言 因为重新渲染数据会引起dom的重绘和回流（重排），这对性能消耗消耗是非常大的，我们在开发的时候尽量避免重绘和回流。因此vue就引入了虚拟dom，也就是virtual dom，这样可以避免直接频繁操作真实的dom,以此来减少性能消耗。 virtual dom通过diff算法（patch）来比较与真实dom的差异，从而更新dom,大大减少了对dom的操作，下面介绍具体方式 一、准备工作 比较v...
differ的用法
11-19 1819
diff <br />diff 就是用在比对两个档案之间的差异的，一般是用在 ASCII 纯文字文件的比对上。 我们先预处理一下一个档案好了。假设我要将 /etc/passwd 的内容，将第四行删除， 第六行则取代成为『no six line』，新的档案放置到 /tmp/test 里面， 那么应该怎么做？ <br />[root@linux ~]# mkdir -p /tmp/test <br />[root@linux ~]# cat /etc/passwd | / <br />> sed -e '4d'
DOM的differ算法
qq_21087199的博客
11-25 373
a）虚拟DOM中key的作用 简单的说：key是虚拟DOM对象的标识，在更新显示时key起着极其重要的作用。 详细的书：当状态中的数据发生变化时，react会根据【新数据】生成【新的虚拟DOM】随后React进行【新的虚拟DOM】与【旧虚拟DOM】的diff比较， （1）旧虚拟DOM中找到了与新虚拟DOM相同的key 若虚拟DOM中内容没变，直接使用之前的真实DOM 若虚拟DOM中内容变了，则生成新的真实DOM，随后替换掉页面中之前的真实DOM （2
differ 用法
cloudeagle_bupt的专栏
02-03 3023
[liuqiang2@mu02 logs]$ diff -ur  test1/  test3/ diff -ur test1/1.txt test3/1.txt --- test1/1.txt 2015-02-03 20:52:01.087877007 +0800 +++ test3/1.txt 2015-02-03 20:52:26.761883769 +0800 @@ -1,2 +1
虚拟DOM和 Diff算法
cyz_hd的博客
09-21 343
虚拟DOM 1、用js来模拟DOM中的节点。传说中的虚拟DOM。 虚拟dom实现过程： 1.根据真实dom产生虚拟dom? 虚拟dom?就是一个特殊对象（经过一些处理能产生真实dom） 2.进行编译解析 3.将虚拟dom 变成真实dom 也就 挂载 4.数据发生变化 产生新的虚拟dom 5、将数据变化后的虚拟dom 和之前的虚拟dom 通过differ 算法 进行比对 6、比对之后更新视图 一样的不变 不一样重新渲染 <!DOCTYPE html> <html lang="en"
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值