vue diff 双端比较算法

最新推荐文章于 2024-05-13 19:56:11 发布
最新推荐文章于 2024-05-13 19:56:11 发布
阅读量551 收藏
点赞数
分类专栏： Vue源码 文章标签： vue.js 算法 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43294560/article/details/132120355
版权

文章目录

双端指针

在这里插入图片描述

  • 使用四个变量 oldStartIdx、oldEndIdx、newStartIdx 以及 newEndIdx 分别存储旧 children 和新 children 的两个端点的位置索引
let oldStartIdx = 0
let oldEndIdx = prevChildren.length - 1
let newStartIdx = 0
let newEndIdx = nextChildren.length - 1
  • 除了位置索引之外，还需要拿到四个位置索引所指向的 VNode
let oldStartVNode = prevChildren[oldStartIdx]
let oldEndVNode = prevChildren[oldEndIdx]
let newStartVNode = nextChildren[newStartIdx]
let newEndVNode = nextChildren[newEndIdx]

比较策略

  • 使用旧 children 的头一个 VNode 与新 children 的头一个 VNode 比对，即 oldStartVNode 和 newStartVNode 比较对。
  • 使用旧 children 的最后一个 VNode 与新 children 的最后一个 VNode 比对，即 oldEndVNode 和 newEndVNode 比对。
  • 使用旧 children 的头一个 VNode 与新 children 的最后一个 VNode 比对，即 oldStartVNode 和 newEndVNode 比对。
  • 使用旧 children 的最后一个 VNode 与新 children 的头一个 VNode 比对，即 oldEndVNode 和 newStartVNode 比对。
    在这里插入图片描述
while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {
  if (oldStartVNode.key === newStartVNode.key) {
    // 步骤一：oldStartVNode 和 newStartVNode 比对
  } else if (oldEndVNode.key === newEndVNode.key) {
    // 步骤二：oldEndVNode 和 newEndVNode 比对
  } else if (oldStartVNode.key === newEndVNode.key) {
    // 步骤三：oldStartVNode 和 newEndVNode 比对
  } else if (oldEndVNode.key === newStartVNode.key) {
    // 步骤四：oldEndVNode 和 newStartVNode 比对
  }
}

命中策略四

  • 第一步：拿旧 children 中的 li-a 和新 children 中的 li-d 进行比对，由于二者 key 值不同，所以不可复用，什么都不做。
  • 第二步：拿旧 children 中的 li-d 和新 children 中的 li-c 进行比对，同样不可复用，什么都不做。
  • 第三步：拿旧 children 中的 li-a 和新 children 中的 li-c 进行比对，什么都不做。
  • 第四步：拿旧 children 中的 li-d 和新 children 中的 li-d 进行比对，由于这两个节点拥有相同的 key 值，所以我们在这次比对的过程中找到了可复用的节点。
    • li-d 节点所对应的真实 DOM 原本是最后一个子节点，并且更新之后它应该变成第一个子节点。所以我们需要把 li-d 所对应的真实 DOM 移动到最前方即可：
while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {
	if (oldStartVNode.key === newStartVNode.key) {
	  // 步骤一：oldStartVNode 和 newStartVNode 比对
	} else if (oldEndVNode.key === newEndVNode.key) {
	  // 步骤二：oldEndVNode 和 newEndVNode 比对
	} else if (oldStartVNode.key === newEndVNode.key) {
	  // 步骤三：oldStartVNode 和 newEndVNode 比对
	} else if (oldEndVNode.key === newStartVNode.key) {
	  // 步骤四：oldEndVNode 和 newStartVNode 比对
	
	  // 先调用 patch 函数完成更新
	  patch(oldEndVNode, newStartVNode, container)
	  // 更新完成后，将容器中最后一个子节点移动到最前面，使其成为第一个子节点
	  container.insertBefore(oldEndVNode.el, oldStartVNode.el)
	  // 更新索引，指向下一个位置
	  oldEndVNode = prevChildren[--oldEndIdx]
	  newStartVNode = nextChildren[++newStartIdx]
	}
}

命中策略二

  • 上一步更新完成之后，新的索引关系可以用下图来表示：
    在这里插入图片描述
  • 第一步：拿旧 children 中的 li-a 和新 children 中的 li-b 进行比对，由于二者 key 值不同，所以不可复用，什么都不做。
  • 第二步：拿旧 children 中的 li-c 和新 children 中的 li-c 进行比对，此时，由于二者拥有相同的 key，所以是可复用的节点，但是由于二者在新旧 children 中都是最末尾的一个节点，所以是不需要进行移动操作的，只需要调用 patch 函数更新即可，同时将相应的索引前移一位
while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {
  if (oldStartVNode.key === newStartVNode.key) {
    // 步骤一：oldStartVNode 和 newStartVNode 比对
  } else if (oldEndVNode.key === newEndVNode.key) {
    // 步骤二：oldEndVNode 和 newEndVNode 比对

    // 调用 patch 函数更新
    patch(oldEndVNode, newEndVNode, container)
    // 更新索引，指向下一个位置
    oldEndVNode = prevChildren[--oldEndIdx]
    newEndVNode = nextChildren[--newEndIdx]
  } else if (oldStartVNode.key === newEndVNode.key) {
    // 步骤三：oldStartVNode 和 newEndVNode 比对
  } else if (oldEndVNode.key === newStartVNode.key) {
    // 步骤四：oldEndVNode 和 newStartVNode 比对

    // 先调用 patch 函数完成更新
    patch(oldEndVNode, newStartVNode, container)
    // 更新完成后，将容器中最后一个子节点移动到最前面，使其成为第一个子节点
    container.insertBefore(oldEndVNode.el, oldStartVNode.el)
    // 更新索引，指向下一个位置
    oldEndVNode = prevChildren[--oldEndIdx]
    newStartVNode = nextChildren[++newStartIdx]
  }
}

命中策略三

  • 上一步更新完成之后，新的索引关系可以用下图来表示：
    在这里插入图片描述
  • 第一步：拿旧 children 中的 li-a 和新 children 中的 li-b 进行比对，由于二者 key 值不同，所以不可复用，什么都不做。
  • 第二步：拿旧 children 中的 li-b 和新 children 中的 li-a 进行比对，不可复用，什么都不做。
  • 第三步：拿旧 children 中的 li-a 和新 children 中的 li-a 进行比对，此时，我们找到了可复用的节点。
    • 这一次满足的条件是：oldStartVNode.key === newEndVNode.key，这说明：li-a 节点所对应的真实 DOM 原本是第一个子节点，但现在变成了“最后”一个子节点，这里的“最后”并不是指真正意义上的最后一个节点，而是指当前索引范围内的最后一个节点。所以移动操作也是比较明显的，我们将 oldStartVNode 对应的真实 DOM 移动到 oldEndVNode 所对应真实 DOM 的后面即可
while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {
  if (oldStartVNode.key === newStartVNode.key) {
    // 步骤一：oldStartVNode 和 newStartVNode 比对
  } else if (oldEndVNode.key === newEndVNode.key) {
    // 步骤二：oldEndVNode 和 newEndVNode 比对

    // 调用 patch 函数更新
    patch(oldEndVNode, newEndVNode, container)
    // 更新索引，指向下一个位置
    oldEndVNode = prevChildren[--oldEndIdx]
    newEndVNode = newEndVNode[--newEndIdx]
  } else if (oldStartVNode.key === newEndVNode.key) {
    // 步骤三：oldStartVNode 和 newEndVNode 比对

    // 调用 patch 函数更新
    patch(oldStartVNode, newEndVNode, container)
    // 将 oldStartVNode.el 移动到 oldEndVNode.el 的后面，也就是 oldEndVNode.el.nextSibling 的前面
    container.insertBefore(
      oldStartVNode.el,
      oldEndVNode.el.nextSibling
    )
    // 更新索引，指向下一个位置
    oldStartVNode = prevChildren[++oldStartIdx]
    newEndVNode = nextChildren[--newEndIdx]
  } else if (oldEndVNode.key === newStartVNode.key) {
    // 步骤四：oldEndVNode 和 newStartVNode 比对

    // 先调用 patch 函数完成更新
    patch(oldEndVNode, newStartVNode, container)
    // 更新完成后，将容器中最后一个子节点移动到最前面，使其成为第一个子节点
    container.insertBefore(oldEndVNode.el, oldStartVNode.el)
    // 更新索引，指向下一个位置
    oldEndVNode = prevChildren[--oldEndIdx]
    newStartVNode = nextChildren[++newStartIdx]
  }
}

命中策略一

  • 上一步更新完成之后，新的索引关系可以用下图来表示：
    在这里插入图片描述
  • 第一步：拿旧 children 中的 li-b 和新 children 中的 li-b 进行比对，二者拥有相同的 key，可复用
while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {
  if (oldStartVNode.key === newStartVNode.key) {
    // 步骤一：oldStartVNode 和 newStartVNode 比对

    // 调用 patch 函数更新
    patch(oldStartVNode, newStartVNode, container)
    // 更新索引，指向下一个位置
    oldStartVNode = prevChildren[++oldStartIdx]
    newStartVNode = nextChildren[++newStartIdx]
  } else if (oldEndVNode.key === newEndVNode.key) {
    // 省略...
  } else if (oldStartVNode.key === newEndVNode.key) {
    // 省略...
  } else if (oldEndVNode.key === newStartVNode.key) {
    // 省略...
  }
}

未命中四种策略，遍历旧节点列表

在这里插入图片描述

  • 上图中 ①、②、③、④ 这四步中的每一步比对，都无法找到可复用的节点
  • 策略为：拿新 children 中的第一个节点尝试去旧 children 中寻找，试图找到拥有相同 key 值的节点
  • 如果在旧的 children 中找到了与新 children 中第一个节点拥有相同 key 值的节点，这意味着：旧 children 中的这个节点所对应的真实 DOM 在新 children 的顺序中，已经变成了第一个节点。所以我们需要把该节点所对应的真实 DOM 移动到最前头
    在这里插入图片描述
while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {
  if (oldStartVNode.key === newStartVNode.key) {
    // 省略...
  } else if (oldEndVNode.key === newEndVNode.key) {
    // 省略...
  } else if (oldStartVNode.key === newEndVNode.key) {
    // 省略...
  } else if (oldEndVNode.key === newStartVNode.key) {
    // 省略...
  } else {
    // 遍历旧 children，试图寻找与 newStartVNode 拥有相同 key 值的元素
    const idxInOld = prevChildren.findIndex(
      node => node.key === newStartVNode.key
    )
    if (idxInOld >= 0) {
      // vnodeToMove 就是在旧 children 中找到的节点，该节点所对应的真实 DOM 应该被移动到最前面
      const vnodeToMove = prevChildren[idxInOld]
      // 调用 patch 函数完成更新
      patch(vnodeToMove, newStartVNode, container)
      // 把 vnodeToMove.el 移动到最前面，即 oldStartVNode.el 的前面
      container.insertBefore(vnodeToMove.el, oldStartVNode.el)
      // 由于旧 children 中该位置的节点所对应的真实 DOM 已经被移动，所以将其设置为 undefined
      prevChildren[idxInOld] = undefined
    }
    // 将 newStartIdx 下移一位
    newStartVNode = nextChildren[++newStartIdx]
  }
}
  • 因为旧节点已经找到并处理过了，所以后续的双端比较需要跳过处理过的节点
  • 将旧 children 中的 li-b 节点变成 undefined，然后旧节点指针遇到时跳过
while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {
  // undefined 跳过
  if (!oldStartVNode) {
    oldStartVNode = prevChildren[++oldStartIdx]
  } else if (!oldEndVNode) { // undefined 跳过
    oldEndVNode = prevChildren[--oldEndIdx]
  } else if (oldStartVNode.key === newStartVNode.key) {
    // 省略...
  } else if (oldEndVNode.key === newEndVNode.key) {
    // 省略...
  } else if (oldStartVNode.key === newEndVNode.key) {
    // 省略...
  } else if (oldEndVNode.key === newStartVNode.key) {
    // 省略...
  } else {
    const idxInOld = prevChildren.findIndex(
      node => node.key === newStartVNode.key
    )
    if (idxInOld >= 0) {
      const vnodeToMove = prevChildren[idxInOld]
      patch(vnodeToMove, newStartVNode, container)
      prevChildren[idxInOld] = undefined
      container.insertBefore(vnodeToMove.el, oldStartVNode.el)
    }
    newStartVNode = nextChildren[++newStartIdx]
  }
}

新增情况一

  • 节点所在的双端不满足四种策略，也不满足能找到旧节点

在这里插入图片描述

  • 在新 children 中，节点 li-d 是一个全新的节点。在这个例子中 ①、②、③、④ 这四步的比对仍然无法找到可复用节点，所以我们会尝试拿着新 children 中的 li-d 节点去旧的 children 寻找与之拥有相同 key 值的节点，结果很显然，我们无法找到这样的节点。这时说明该节点是一个全新的节点，我们应该将其挂载到容器中，由于 li-d 节点的位置索引是 newStartIdx，这说明 li-d 节点是当前这一轮比较中的“第一个”节点，所以只要把它挂载到位于 oldStartIdx 位置的节点所对应的真实 DOM 前面就可以了，即 oldStartVNode.el
while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {
  if (!oldStartVNode) {
    oldStartVNode = prevChildren[++oldStartIdx]
  } else if (!oldEndVNode) {
    oldEndVNode = prevChildren[--oldEndIdx]
  } else if (oldStartVNode.key === newStartVNode.key) {
    // 省略...
  } else if (oldEndVNode.key === newEndVNode.key) {
    // 省略...
  } else if (oldStartVNode.key === newEndVNode.key) {
    // 省略...
  } else if (oldEndVNode.key === newStartVNode.key) {
    // 省略...
  } else {
    const idxInOld = prevChildren.findIndex(
      node => node.key === newStartVNode.key
    )
    if (idxInOld >= 0) {
      const vnodeToMove = prevChildren[idxInOld]
      patch(vnodeToMove, newStartVNode, container)
      prevChildren[idxInOld] = undefined
      container.insertBefore(vnodeToMove.el, oldStartVNode.el)
    } else {
      // 使用 mount 函数挂载新节点，如果传入了最后一个参数，内部也是使用 insertBefore
      mount(newStartVNode, container, false, oldStartVNode.el)
    }
    newStartVNode = nextChildren[++newStartIdx]
  }
}

新增情况二

  • 节点所在的双端优先满足了四种策略

在这里插入图片描述

  • 最终双端比较完成后结果
    在这里插入图片描述
  • oldEndIdx 将比 oldStartIdx 的值要小，对 oldEndIdx 和 oldStartIdx 的值进行检查，如果在循环结束之后 oldEndIdx 的值小于 oldStartIdx 的值则说明新的 children 中存在还没有被处理的全新节点，这时我们应该调用 mount 函数将其挂载到容器元素中，观察上图可知，我们只需要把这些全新的节点添加到 oldStartIdx 索引所指向的节点之前即可
while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {
  // 省略...
}
if (oldEndIdx < oldStartIdx) {
  // 添加新节点
  for (let i = newStartIdx; i <= newEndIdx; i++) {
    mount(nextChildren[i], container, false, oldStartVNode.el)
  }
}

删除节点

在这里插入图片描述

  • 在进行双端比较后
    在这里插入图片描述
  • 此时 newEndIdx 的值小于 newStartIdx 的值，所以循环将终止，但是通过上图可以发现，旧 children 中的 li-b 节点没有得到被处理的机会，我们应该将其移除才行，循环结束后，一旦满足条件 newEndIdx < newStartId 则说明有元素需要被移除
while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {
  // 省略...
}
if (oldEndIdx < oldStartIdx) {
  // 添加新节点
  for (let i = newStartIdx; i <= newEndIdx; i++) {
    mount(nextChildren[i], container, false, oldStartVNode.el)
  }
} else if (newEndIdx < newStartIdx) {
  // 移除操作
  for (let i = oldStartIdx; i <= oldEndIdx; i++) {
    container.removeChild(prevChildren[i].el)
  }
}

双端比较的优势

  • 对于如下节点情况

在这里插入图片描述

  • 如果采用 React 根据相对位置的diff 方式来对上例进行更新，则会执行两次移动操作
    • 首先会把 li-a 节点对应的真实 DOM 移动到 li-c 节点对应的真实 DOM 的后面
    • 接着再把 li-b 节点所对应的真实 DOM 移动到 li-a 节点所对应真实 DOM 的后面，即：
      在这里插入图片描述
  • 如果采用 vue 的双端比较 diff
    • 第一步：拿旧 children 中的 li-a 和新 children 中的 li-c 进行比对，由于二者 key 值不同，所以不可复用，什么都不做。
    • 第二步：拿旧 children 中的 li-c 和新 children 中的 li-b 进行比对，不可复用，什么都不做。
    • 第三步：拿旧 children 中的 li-a 和新 children 中的 li-b 进行比对，不可复用，什么都不做。
    • 第四步：拿旧 children 中的 li-c 和新 children 中的 li-c 进行比对，此时，两个节点拥有相同的 key 值，可复用。

在这里插入图片描述

  • 可以看到，我们只通过一次 DOM 移动，就使得真实 DOM 的顺序与新 children 中节点的顺序一致，后序只需要 patch 不需要移动。双端比较更加符合人类思维，在移动 DOM 方面更具有普适性，能减少因为 DOM 结构的差异而产生的影响
神奇大叔
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
一文搞懂Vue Diff算法
小王的技术库
12-14 1392
简单diff算法便是拿新节点数组中的节点去旧节点数组中查找，通过key来判断是否可以复用。并记录当前的lastIdx，以此来判断节点间的相对位置是否发生变化，如果变化，需要进行移动。双端diff算法的优势在于对于一些比较特殊的情况能更快的对节点进行处理，也更贴合实际开发。而双端的含义便在于通过两组子节点的头尾分别进行比较并更新。最近找到一个VUE的文档，它将VUE的各个知识点进行了总结，整理成了《Vue 开发必须知道的36个技巧》。内容比较详实，对各个知识点的讲解也十分到位。
vue源码学习 深入patch diff双端对比算法
一袋米要扛几楼_
04-03 1163
什么时候调用patch 在beforeMount和mounted之间，会执行options.render函数生成新的VNode树。然后调用vm._update(新VNode)更新，然后进入到patch阶段。 // src/core/instance/lifecycle.js export function mountComponent ( vm: Component, el: ?Eleme...
解析Vue 2.5的Diff算法
08-28
本文将对于Vue 2.5.3版本中使用的Virtual Dom进行分析。updataChildren是Diff算法的核心，所以本文对updataChildren进行了图文的分析。下面通过本文给大家分享Vue 2.5的Diff算法，需要的朋友参考下吧
Vue数据响应原理及Diff比对
月光晒了很凉快的博客
09-01 1140
每个组件实例都有相应的 watcher 实例对象，它会在组件渲染的过程中把属性记录为依赖，之后当依赖项的 setter 被调用时，会通知 watcher 重新计算，从而致使它关联的组件得以更新。方法通知所有的订阅者，订阅者就会通过patch函数对比新旧虚拟节点是否一样，如果用新的虚拟节点则整个替换老节点，如果不是使用新节点，则根据子节点情况来进行同层比较。假如旧节点中存在 a 节点，而新节点中没有 a 节点，则直接将旧节点中的 a 节点销毁。没有新节点，直接触发旧节点的destory钩子，进行销毁。
Vue渲染器（四）：双端diff算法
Zzh1110的博客
12-14 717
这章介绍了双端Diff算法的原理和优势，简单来说主要通过新旧vnode的前后指针来判断，有四种命中情况，命中一种则不再进行判断。
vue 如何对两个文本比较
weixin_43826136的博客
12-25 4279
最开始使用的vue-code-dff插件 有坑 直接导致页面卡死 所以改用下面得插件 1、首先安装插件 npm installcodemirror、diff-match-patch 2、二话不说 直接键个vue 文件 上代码 <template> <div class="compareClass"> <!-- 代码版本，差异对比 对话框内容 --> <div id="view" style="margi...
Vue:使用vue-codemirror编写文本比对功能
LeeBingNing的博客
12-09 6804
使用vue-codemirror搭配diff-match-patch进行文本比对，增加文字描述，示例如下：共4处差异，每处差异的开始行号为：2、589、2904、12328。帮助用户快速定位差异位置
文本差异（变更）对比 ----------- java + vue 实现
q3198215426的博客
04-11 2780
diffPosition 记录每处差异开始位置，包括源和目的下标。DiffTextUtil.findDiff 参数为两个需要对比的字符串列表，核心代码是。insertList 记录目的新增下标。sourceChange 记录源改变下标。targetChange 记录目的改变下标。遍历对比的结果记录，找到新增、修改、删除对应的下标记录下来。第一个参数是源 （a），第二个参数是目的(b)到前端跳转到下一处差异按钮用。
前端进阶1 ——数据比对
wujianyouhun的专栏
05-25 746
在很开发场景中遇到了数据更新并渲染问题，而项目实际情况中会遇到页面数据量大的时候页面卡死。需要对其进行优化，数据更新渲染优化的主要思路是先对比数据变化情况，包含变化了的，新增的，减少的。然后针对变化的数据，局部更新数据。现在场景是地图要素的更新渲染，当渲染数据量过大，新的数据来之后要进行更新，如果直接全部清除，在重新渲染将直接导致系统Over。所以先对比数据，然后更新数据。
Vue原理-diff比对算法
火腿肠的博客
12-18 750
diff比对算法 源码版 https://blog.csdn.net/s2422617864/article/details/119855400 原理版 首先： h函数用于生成虚拟节点，path比对新老虚拟节点之后替换真实dom树 path算法替换新老节点 没有key暴力删除 有key按照key判断然后调整顺序（如果节点为同一节点致） 且path比对算法只能同层比较不能跨层比较 手写diff算法 整体代码 就是单纯将js转换为一个虚拟dom对象的形式（包含类型、内容、子节点、key等） createEl
vue-vue2和vue3的diff算法
weixin_42855188的博客
04-12 3008
乱序部分，采用最长递增子序列的算法，最大递增子序列的作用就是通过新旧节点变化前后的映射，创建一个递增数组，这样就可以知道哪些节点在变化前后相对位置没有发生变化，哪些节点需要进行移动，如下图计算出E、F、Y、J 是不需要操作的节点，直接复用，然后移动K节点，即可完成一次更新；若新的比老的长，创建，可以看到下图新的比老的多，新的多了一个D，多出来的这个节点就需要创建并添加到尾部。老的比新的长，删除，可以看到下图老的比新的多了个C，多出来的这个节点需要删除。
vue3 - diff算法之快速diff算法
军火库
09-30 1009
什么是预处理呢？，如果全等旧没有必要进入核心的diff步骤了。除了全等比较，还会对他们进行前缀于后缀的比较。一眼就能看到这两段文本的头部和尾部分别有一段相同的内容。I am afrontI am abackTEXT2：back这是一种简化问题的方式，好处是可以在特定情况下能够轻松判断文本的插入和删除。TEXT3：TEXT4：too如果 TEXT3 是新的内容，那么只需要删除多余的 too 就可以完成文本更新；否则，添加 too 完成文本更新。
Vue3diff算法原理和优化
radcb55226的博客
04-20 922
你要问前端开发难不难，我就得说计算机领域里常说的一句话，这句话就是『难的不会，会的不难』，对于不熟悉某领域技术的人来说，因为不了解所以产生神秘感，神秘感就会让人感觉很难，也就是『难的不会』；当学会这项技术之后，知道什么什么技术能做到什么做不到，只是做起来花多少时间的问题而已，没啥难的，所以就是『会的不难』。我特地针对初学者整理一套前端学习资料，免费分享给大家，戳这里即可免费领取小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！**
sonar检测java vue项目_spring boot使用sonarqube来检查技术债务
weixin_31887421的博客
02-27 995
作为代码质量检查的流行工具，比如Sonarqube能够检查代码的“七宗罪”，跟代码结合起来能够更好地提高代码的质量，让我们来看一下，刚刚写的Springboot2的HelloWorld的代码有什么“罪”。SonarqubeSonarqube可以使用docker版本快速搭建，可以参看一下Easypack整理的镜像，具体使用可以参看如下链接，这里不再赘述：环境假定本文使用到的sonarqube为本机3...
vue2和vue3diff算法对比
最新发布
weixin_42254016的博客
05-13 310
4、然而，拿新的一组子节点中的头部节点去旧的一组子节点中寻找可复用的节点，并非总能找到，这说明这个新的头部节点是新增节点，只需要将其挂载到头部即可。2、如果经过四个端点的比较，都没有可复用的节点，则将旧的子序列保存为节点 key 为 key ，index 为 value 的 map。3、拿新的一组子节点的头部节点去 map 中查找，如果找到可复用的节点，则将相应的节点进行更新，并将其移动到头部，然后头部指针右移。5、继续双端对比，经过上述处理，最后还剩下新的节点就批量新增，剩下旧的节点就批量删除。
Java对比PDF文件内容
tdiiidikhgf的博客
01-16 1534
文章仅对PDF文件中的文本内容进行对比，并在差异处高亮显示差异内容。新增文本为绿色、删除为红色。在 DiffUtil 的 getDiffPdf 方法传入需要对比的文件路径，以及输出的文件路径。使用 java-diff-utils、pdfbox 完成PDF内容的比较以及差异处的高亮显示。spingboot版本 2.7.1。工具类中用到的其他自定义的类。工具类DiffUtil。
vue3使用vue-diff插件实现文本对比
weixin_54165147的博客
01-29 1781
vue-diff会根据这两个属性的值进行文本对比，并展示出修改的部分。你可以根据自己的需求，修改。的值来进行不同的对比。
Vue.js 3 开源组件推荐：代码差异查看器插件
前端全栈开发者
10-24 2386
一个Vue.js差异查看器插件，可以用来比较两个代码片断之间的差异。3.可用的组件props。2.向模板中添加组件。
vue diff算法原理
05-18
Vue的diff算法是通过新旧虚拟DOM树的比较，找出需要更新的部分，并最小化DOM操作的数量来提高渲染性能的。下面简单介绍一下Vue的diff算法原理： 1. 新旧节点类型不同，直接替换 如果新旧节点的tag不同，直接将旧...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值