Vue2 与 Vue3 diff 算法核心解析及代码示例

于 2024-10-09 20:54:08 发布
阅读量293 收藏 7
点赞数 3
分类专栏： 前端 文章标签： 算法
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_57836225/article/details/142796325
版权

目录

Vue2 与 Vue3 diff 算法核心解析及代码示例

一、Vue2 diff 算法核心

二、Vue3 diff 算法对比

在前端开发中，Vue.js 以其高效的性能和灵活的开发方式受到了广泛的欢迎。其中，diff 算法作为 Vue.js 中优化更新性能的关键部分，在不同版本中有着不同的实现和特点。本文将首先介绍 Vue2 的 diff 算法核心内容，然后对比 Vue3 的情况，并给出代码示例。

一、Vue2 diff 算法核心

在 Vue2 中，当新旧虚拟节点都有子节点时，会进入最复杂的情况进行条件筛选。具体分为以下六种情况：

  1. 旧前和新前：旧的第一个节点（旧前）和新的第一个节点（新前）进行匹配。如果匹配成功，两个指针都加加，继续匹配下一对节点。
  2. 旧后和新后：旧的最后一个节点（旧后）和新的最后一个节点（新后）进行匹配。如果匹配成功，两个指针都减减，往上走进行匹配。
  3. 旧前和新后：旧的第一个节点（旧前）和新的最后一个节点（新后）进行匹配。如果匹配成功，旧的指针加加，新的指针减减。
  4. 旧后和新前：旧的最后一个节点（旧后）和新的第一个节点（新前）进行匹配。如果匹配成功，旧的指针减减，新的指针加加。
  5. 以上都不满足进行遍历查找：如果以上四种情况都不满足，会进行遍历查找。旧的指针从第一个节点开始，在旧的子节点数组中查找与新节点匹配的节点。如果找到，将新节点添加到页面上，并将旧节点对应的位置设置为undefined，新的指针加加。然后继续进行匹配，直到所有新节点都被处理。
  6. 创建或删除：如果新节点比旧节点多，进行创建操作；如果旧节点比新节点多，进行删除操作。

以下是一个简单的 Vue2 diff 算法示例代码（伪代码）：

function updateChildren(oldVNode, newVNode) {
  let oldStartIdx = 0;
  let oldEndIdx = oldVNode.children.length - 1;
  let newStartIdx = 0;
  let newEndIdx = newVNode.children.length - 1;

  while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {
    // 旧前和新前
    if (isSameVNode(oldVNode.children[oldStartIdx], newVNode.children[newStartIdx])) {
      patch(oldVNode.children[oldStartIdx], newVNode.children[newStartIdx]);
      oldStartIdx++;
      newStartIdx++;
    }
    // 旧后和新后
    else if (isSameVNode(oldVNode.children[oldEndIdx], newVNode.children[newEndIdx])) {
      patch(oldVNode.children[oldEndIdx], newVNode.children[newEndIdx]);
      oldEndIdx--;
      newEndIdx--;
    }
    // 旧前和新后
    else if (isSameVNode(oldVNode.children[oldStartIdx], newVNode.children[newEndIdx])) {
      patch(oldVNode.children[oldStartIdx], newVNode.children[newEndIdx]);
      oldStartIdx++;
      newEndIdx--;
    }
    // 旧后和新前
    else if (isSameVNode(oldVNode.children[oldEndIdx], newVNode.children[newStartIdx])) {
      patch(oldVNode.children[oldEndIdx], newVNode.children[newStartIdx]);
      oldEndIdx--;
      newStartIdx++;
    } else {
      // 以上都不满足进行遍历查找
      let oldIndex = findIndexInOld(oldVNode.children, newVNode.children[newStartIdx]);
      if (oldIndex > -1) {
        patch(oldVNode.children[oldIndex], newVNode.children[newStartIdx]);
        // 将旧节点对应的位置设置为 undefined
        oldVNode.children[oldIndex] = undefined;
      } else {
        // 创建新节点
        createElement(newVNode.children[newStartIdx]);
      }
      newStartIdx++;
    }
  }

  // 删除多余的旧节点
  if (oldStartIdx <= oldEndIdx) {
    while (oldStartIdx <= oldEndIdx) {
      remove(oldVNode.children[oldStartIdx++]);
    }
  }
  // 创建多余的新节点
  if (newStartIdx <= newEndIdx) {
    while (newStartIdx <= newEndIdx) {
      createElement(newVNode.children[newStartIdx++]);
    }
  }
}

二、Vue3 diff 算法对比

在 Vue3 中，diff 算法进行了一些优化，主要体现在以下几个方面：

  1. 静态提升：Vue3 将不会变化的静态节点提升到外部，避免在每次更新时进行不必要的 diff 操作，从而提高性能。
  2. 事件监听缓存：Vue3 对事件监听进行了缓存，避免在每次更新时重新绑定事件，进一步提高性能。
  3. 基于最长递增子序列的优化：Vue3 在 diff 过程中，使用了基于最长递增子序列的算法来减少移动节点的操作，提高更新性能。

以下是一个简单的 Vue3 diff 算法示例代码（伪代码）：

function updateChildren(oldVNode, newVNode) {
  let oldStartIdx = 0;
  let oldEndIdx = oldVNode.children.length - 1;
  let newStartIdx = 0;
  let newEndIdx = newVNode.children.length - 1;

  // 静态节点提升后的处理
  const staticChildren = oldVNode.staticChildren || [];
  const newStaticChildren = newVNode.staticChildren || [];

  while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {
    // 处理静态节点
    if (isStaticNode(oldVNode.children[oldStartIdx]) && isStaticNode(newVNode.children[newStartIdx])) {
      if (isSameVNode(oldVNode.children[oldStartIdx], newVNode.children[newStartIdx])) {
        // 静态节点相同，无需更新
      } else {
        // 静态节点不同，需要更新
        patch(oldVNode.children[oldStartIdx], newVNode.children[newStartIdx]);
      }
      oldStartIdx++;
      newStartIdx++;
    } else {
      // 处理动态节点
      // 旧前和新前
      if (isSameVNode(oldVNode.children[oldStartIdx], newVNode.children[newStartIdx])) {
        patch(oldVNode.children[oldStartIdx], newVNode.children[newStartIdx]);
        oldStartIdx++;
        newStartIdx++;
      }
      // 旧后和新后
      else if (isSameVNode(oldVNode.children[oldEndIdx], newVNode.children[newEndIdx])) {
        patch(oldVNode.children[oldEndIdx], newVNode.children[newEndIdx]);
        oldEndIdx--;
        newEndIdx--;
      }
      // 旧前和新后
      else if (isSameVNode(oldVNode.children[oldStartIdx], newVNode.children[newEndIdx])) {
        patch(oldVNode.children[oldStartIdx], newVNode.children[newEndIdx]);
        oldStartIdx++;
        newEndIdx--;
      }
      // 旧后和新前
      else if (isSameVNode(oldVNode.children[oldEndIdx], newVNode.children[newStartIdx])) {
        patch(oldVNode.children[oldEndIdx], newVNode.children[newStartIdx]);
        oldEndIdx--;
        newStartIdx++;
      } else {
        // 以上都不满足进行遍历查找
        let oldIndex = findIndexInOld(oldVNode.children, newVNode.children[newStartIdx]);
        if (oldIndex > -1) {
          patch(oldVNode.children[oldIndex], newVNode.children[newStartIdx]);
          // 将旧节点对应的位置设置为 undefined
          oldVNode.children[oldIndex] = undefined;
        } else {
          // 创建新节点
          createElement(newVNode.children[newStartIdx]);
        }
        newStartIdx++;
      }
    }
  }

  // 删除多余的旧节点
  if (oldStartIdx <= oldEndIdx) {
    while (oldStartIdx <= oldEndIdx) {
      remove(oldVNode.children[oldStartIdx++]);
    }
  }
  // 创建多余的新节点
  if (newStartIdx <= newEndIdx) {
    while (newStartIdx <= newEndIdx) {
      createElement(newVNode.children[newStartIdx++]);
    }
  }
}

通过对比可以看出，Vue3 的 diff 算法在保持与 Vue2 类似的基本逻辑的同时，通过静态提升、事件监听缓存和基于最长递增子序列的优化等方式，进一步提高了性能。

在实际开发中，了解和掌握 Vue 的 diff 算法对于优化应用性能和提高开发效率非常重要。希望本文能够帮助你更好地理解 Vue2 和 Vue3 的 diff 算法核心内容。

阿贾克斯的黎明
关注
专栏目录
vue-vue2和vue3的diff算法
weixin_42855188的博客
04-12 3129
乱序部分，采用最长递增子序列的算法，最大递增子序列的作用就是通过新旧节点变化前后的映射，创建一个递增数组，这样就可以知道哪些节点在变化前后相对位置没有发生变化，哪些节点需要进行移动，如下图计算出E、F、Y、J 是不需要操作的节点，直接复用，然后移动K节点，即可完成一次更新；若新的比老的长，创建，可以看到下图新的比老的多，新的多了一个D，多出来的这个节点就需要创建并添加到尾部。老的比新的长，删除，可以看到下图老的比新的多了个C，多出来的这个节点需要删除。
Vue3 Diff算法
cookie-y的博客
02-02 471
当新旧vnode的子节点都是一组节点时，为了以最小的性能开销完成更新操作，需要比较两组子节点。用于比较的算法就是Diff算法。
对比Vue2，Vue3优化了什么？
程序媛的梦工厂
03-08 566
一、响应式原理api的改变 vue2使用的为defineProperty，vue3使用的是proxy 1、defineProperty：在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象 只代理对象上的某个属性 对象上定义新属性时，无法监听（为弥补这个问题，增加额外set、delete方法） 数组新增删除修改时，无法监听 只有2个get, set方法 2、proxy：用于定义基本操作的自定义行为 Proxy代理整个对象，所以新增的属性也会被监听 可以弥补defineProperty的
Vue2和Vue3中的diff算法
最新发布
weixin_45231569的博客
08-18 2282
Vue2和Vue3中的diff算法
Vue2和Vue3的区别
m0_51328823的博客
02-21 4317
1. 双向数据绑定原理 vue2 是结合发布者订阅者模式，结合es6Object.defineProperty()对数据进行劫持，进一步通过vue中的watcher的update实现双向数据绑定。 vue3 中使用了es6的proxy进行数据代理。 相对于vue2，使用proxy的优势： defineProperty只能监听某个属性，不能对全对象监听； 可以监听到数组内部的变化； vue2中我们给对象添加一个新属性，它不会更新到视图上，只是因为新添加的属性并没有通过Object.defineProper
vue2 vue3 diff算法比较
博客
03-19 1476
简单来说，就是先老节点与新节点，头对头->尾对尾->头对尾->尾对头,再不行就从根据新节点key值，找对应的老节点，找到更新对应的真实dom.以上五步是不符合条件依次往下，符合条件，新老节点的startIndex或endIndex会向中间靠拢，进行下一节点的对比。例如：现在有abcd四个节点，需要在bc节点间添加一个e节点，没有key值时，会将c节点变成e节点，d节点变成c节点，最后加入d节点（如下图一）。3：vue2的diff完全乱序的列表需要借助key，性能会好一些，vue3是借助位置变化值。
vue2和vue3的diff算法有什么区别？
qq_42220848的博客
07-15 986
Vue3的diff算法在vue2的基础上进行了一些优化和改进，这些优化包括：静态节点提升、区块树、支持碎片化、响应系统的优化、编译的优化等，这些优化减少了渲染时间，减少了不必要的比对和DOM操作，提高了应用性能。
详解vue的diff算法原理
08-27
Vue的diff算法原理详解 在本文中，我们将详细介绍 Vue 的 diff 算法原理，diff 算法是 Vue 框架中的一种关键技术，用于高效地更新虚拟 DOM 和真实 DOM。本文将从以下几个方面来介绍 diff 算法的原理： 1. 何时更新...
详解vue3.0 diff算法的使用(超详细)
01-19
前言：随之vue3.0beta版本的发布，vue3.0正式版本相信不久就会与我们相遇。...2 diff算法是怎么运作的，到底有什么作用？ 3 在v-for 循环列表 key 的作用是什么 4 用索引index做key真的有用？ 到底用什么做key才
一篇文章带你搞懂Vue虚拟Dom与diff算法
10-14
虚拟DOM（Virtual DOM）和diff算法是现代前端框架的核心技术之一，特别是对于Vue这样的响应式框架来说，它们扮演着至关重要的角色。在介绍Vue的虚拟DOM和diff算法之前，我们首先需要了解什么是虚拟DOM以及为什么需要...
vue2与vue3的diff算法有什么区别
SailingCoder的博客
02-28 3216
在 Vue 中，虚拟 DOM 是一种重要的概念，它通过将真实的 DOM 操作转化为对虚拟 DOM 的操作，从而提高应用的性能。Vue 框架在虚拟 DOM 的更新过程中采用了 Diff 算法，用于比较新旧虚拟节点树，找出需要更新的部分，并最小化 DOM 操作。Vue2 和 Vue3 在 Diff算法上有所不同，下面我们就说说这两者的具体区别。
vue2和vue3diff算法对比
weixin_42254016的博客
05-13 400
4、然而，拿新的一组子节点中的头部节点去旧的一组子节点中寻找可复用的节点，并非总能找到，这说明这个新的头部节点是新增节点，只需要将其挂载到头部即可。2、如果经过四个端点的比较，都没有可复用的节点，则将旧的子序列保存为节点 key 为 key ，index 为 value 的 map。3、拿新的一组子节点的头部节点去 map 中查找，如果找到可复用的节点，则将相应的节点进行更新，并将其移动到头部，然后头部指针右移。5、继续双端对比，经过上述处理，最后还剩下新的节点就批量新增，剩下旧的节点就批量删除。
【前端必备】深入详解Vue2/Vue3 diff算法实现思路
天天打码-16年老码农
02-04 2219
在做diff算法之前有个基本逻辑要明白，Vue的diff算法是同层比较，不会跨层比较，时间复杂度为O(N)。主要使用首尾比较法（头-头，头-尾，尾-头，尾-尾）。Vue2与Vue3的diff算法主要区别是处理完首尾节点后，对剩余节点的处理方式。
vue2 vue3 diff算法比较，2024年最新头条技术面试总共几轮
2401_84138803的博客
04-15 625
简单来说，就是先老节点与新节点，头对头->尾对尾->头对尾->尾对头,再不行就从根据新节点key值，找对应的老节点，找到更新对应的真实dom.以上五步是不符合条件依次往下，符合条件，新老节点的startIndex或endIndex会向中间靠拢，进行下一节点的对比。5. “完全乱序”，（如下图七）：头对不上头，尾对不上尾，头尾交叉也对不上，那就根据key值来找，newStart的key，按顺序从老节点中找到key值对应的节点，从oldStart开始哈，找到后渲染出来，就继续头对头，，，比下去。
Vue2.0 和 Vue3.0 Dom Diff 对比
包磊磊的博客
12-26 3742
在日益复杂的前端应用中，状态管理是一个经常被提及的话题，从早期的刀耕火种时代到jQuery，再到现在流行的MVVM时代，状态管理的形式发生了翻天覆地的变化，我们再也不用维护茫茫多的事件回调、监听来更新视图，转而使用双向数据绑定，只需要维护相应的数据状态，就可以自动更新视图，极大提高开发效率。 但是，双向数据绑定也并不是唯一的办法，还有一个非常粗暴有效的方式：一旦数据发生变化，重新绘制整个视图，也就是重新设置一下innerHTML。这样的做法确实简单、粗暴、有效，但是如果只是因为局部一个小的数据发生变化而更
Vue2 diff 算法 和 Vue3 diff算法 区别
技术前端，忠于热爱 @0.活在风浪里
12-06 7183
虚拟dom 是根据模板生成一个js对象（使用createElement方法）， 根据这个js对象再去生成真实的dom，对复杂的文档DOM结构，提供一种方便的工具， 进行最小化的DOM操作 diff算法 当data发生改变 会根据新的数据生成一个新的虚拟dom ， 新的虚拟dom和旧的虚拟dom进行对比，这个对比的过程就是diff算法， 但是因为这种机制也给代码运行带来了一些压力 效率低 消耗内存。一些不变的数据， 例如常量，不会去修改它是不需要对比的，vue3是将变量赋值flag1，不变
Vue2.x和Vue3.x渲染器的diff算法分别说一下
LuckXinXin的博客
10-27 777
简单来说，diff算法有以下过程 同级比较，再比较子节点 先判断一方有子节点一方没有子节点的情况(如果新的children没有子节点，将旧的子节点移除) 比较都有子节点的情况(核心diff) 递归比较子节点 正常Diff两个树的时间复杂度是O(n^3)，但实际情况下我们很少会进行跨层级的移动DOM，所以Vue将Diff进行了优化，从O(n^3) -> O(n)，只有当新旧children都为多个子节点时才需要用核心的Diff算法进行同层级比较。 Vue2的核心Diff算法采用了双端比较的算法，同.
Vue2、Vue3中diff算法剖析
在所有的事情背后，要有一颗坚定的的本心，要有一颗应对变革和提升自我的本心，世界瞬息万变，本心要坚持到底，保持学习，时刻复盘
08-07 1044
Vue2、Vue3中diff算法剖析
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值