Vue diff算法 - 双端diff

已于 2023-05-04 23:01:44 修改
阅读量393 收藏 1
点赞数 2
CC 4.0 BY-SA版权
分类专栏： 前端框架 Vue diff算法 vue 文章标签： 前端框架 vue.js 算法 前端 javascript
于 2023-05-04 22:43:04 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/undefined_521/article/details/130496330
文章详细阐述了简单diff算法的不足，特别是在处理子节点顺序变化时效率较低的问题。然后介绍了双端diff算法，通过四个索引同时对比新旧节点的两端，减少DOM操作次数，提高性能。文中通过实例展示了双端diff如何进行“理想children”和“非理想children”的循环比较，以及处理添加新元素和移除旧元素的情况，最终提供了一个完整的diff代码实现。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

简单diff的劣势

在讨论双端diff之前 我们先来解释下简单diff到底哪里不行，为啥不被vue采纳

const oldNode = {
  type: 'div',
  children: [
      {type: 'p', key: '1'},
      {type: 'p', key: '2'},
      {type: 'p', key: '3'}
  ]
}
const newNode = {
  type: 'div',
  children: [
    {type: 'p', key: '3'},
    {type: 'p', key: '1'},
    {type: 'p', key: '2'}
  ]
}

以上示例中，newChildren和oldChildren以及真实dom的对应关系如下图所示，红色箭头代表两者之间具有对应关系

当使用简单diff算法时，需要进行两次DOM节点的移动才能完成children重新排序，如下图中的蓝色箭头意为dom节点的移动

不难发现对于这个例子来说，简单diff算法不是最优的方案。如果像下图所示，能直接让key:3这个节点移动key:1之前，则只需要进行一次DOM节点的移动就能完成children重新排序。

接下来讨论的双端diff算法则可以完成这个目标。

双端diff 概述

顾名思义，双端diff就是同时对新旧两组子节点的两个端点进行比较的算法，因此我们需要四个索引值，分别指向新旧两组子节点的两个端点，如下图。

为了方便计算我们还需定义四个变量来分别存储四个索引值所对应的vnode，代码对应如下

/**
 * 
 * @param {新节点} newNode 
 * @param {旧节点} oldNode 
 * @param {父节点} container 
 */
const patchChildren = (newNode, oldNode, container) => {
  const newChildren = newNode.children;
  const oldChildren = oldNode.children;

  let newStartIndex = 0
  let newStartNode = newChildren[newStartIndex]
  let newEndIndex = newChildren.length - 1
  let newEndNode = newChildren[newEndIndex]


  let oldStartIndex = 0
  let oldStartNode = oldChildren[oldStartIndex]
  let oldEndIndex = oldChildren.length - 1
  let oldEndNode = oldChildren[oldEndIndex]

};

在这个算法中，每一轮的比较都会有几个种情况分类处理，我们以下面的两组子节点为例进行“理想children”循环比较，示例中的这两组子节点是比较理想的，后面会补充特殊情况的处理来完善算法。

const oldNode = {
  type: 'div',
  children: [
      {type: 'p', key: '1'},
      {type: 'p', key: '2'},
      {type: 'p', key: '3'}，
      {type: 'p', key: '4'}
  ]
}
const newNode = {
  type: 'div',
  children: [
    {type: 'p', key: '4'},
    {type: 'p', key: '2'},
    {type: 'p', key: '1'}，
    {type: 'p', key: '3'}
  ]
}

“理想children”循环比较

  • 第一轮循环

第一轮比较过程图解及描述如下

  1. newStartNode和oldStartNode之间比较，即p-key:4与p-key:1两者比较，key不相同，不可复用，什么都不用做。
  2. newEndNode和oldEndNode之间比较，即p-key:3与p-key:4两者比较，key不相同，不可复用，什么都不用做。
  3. newEndNode和oldStartNode之间比较，即p-key:3与p-key:1两者比较，key不相同，不可复用，什么都不用做。
  4. newStartNode和oldEndNode之间比较，即p-key:4与p-key:4两者比较，key相同，可以复用。

在4这种情况下，确实找到可复用的真实DOM，接下来就需要将新旧两个vnode进行patchNode，然后再控其对应的真实DOM移动到适当的位置即可。关于DOM的移动，我们可以这么来描述：将oldEndNode对应的真实DOM移动到oldStartNode对应的真实DOM之前。如此这个vnode就已经处理完了，最后将newStartIndex++，oldEndIndex--，对应的图解与代码如下。

const patchChildren = (newNode, oldNode, container) => {
  const newChildren = newNode.children;
  const oldChildren = oldNode.children;

  let newStartIndex = 0
  let newStartNode
  let newEndIndex = newChildren.length - 1
  let newEndNode


  let oldStartIndex = 0
  let oldStartNode
  let oldEndIndex = oldChildren.length - 1
  let oldEndNode

  // 需要注意的是，当newStartIndex > newEndIndex || oldStartIndex > oldEndIndex时需要停止循环
  while(newStartIndex <= newEndIndex && oldStartIndex <= oldEndIndex) {
    newStartNode = newChildren[newStartIndex]
    newEndNode = newChildren[newEndIndex]

    oldStartNode = oldChildren[oldStartIndex]
    oldEndNode = oldChildren[oldEndIndex]

    if (newStartNode.key === oldStartNode.key) {

    } else if (newEndNode.key === oldEndNode.key) {

    } else if (newEndNode.key === oldStartNode.key) {

    } else if (newStartNode.key === oldEndNode.key) {
      patchNode(newStartNode, oldEndNode, container)

      insert(newStartNode.el, container, oldStartNode.el)

      newStartIndex++
      oldEndIndex--
    }
  }
};

  • 第二轮循环

比较过程图解及描述如下

  1. newStartNode和oldStartNode之间比较，即p-key:2与p-key:1两者比较，key不相同，不可复用，什么都不用做。
  2. newEndNode和oldEndNode之间比较，即p-key:3与p-key:3两者比较，key相同，可以复用。
  3. 第二个步骤已生效，newEndNode和oldStartNode之间，即p-key:3和p-key:1之间本轮不会比较。
  4. 第二个步骤已生效，newStartNode和oldEndNode之间，即p-key:2与p-key:3之间本轮不会比较。

在2这种情况下，确实找到可复用的真实DOM，接下来就需要将新旧两个vnode进行patchNode，两个节点目前都处于列表的尾部，因此不需要将其对应的真实DOM进行移动，最后将newEndIndex和oldEndIndex分别减1。对应的代码如下

  while(newStartIndex <= newEndIndex && oldStartIndex <= oldEndIndex) {
    ......
    ......
    if (newStartNode.key === oldStartNode.key) {

    } else if (newEndNode.key === oldEndNode.key) {
      patchNode(newEndNode, oldEndNode, container)

      newEndIndex--
      oldEndIndex--
    } else if (newEndNode.key === oldStartNode.key) {

    } else if (newStartNode.key === oldEndNode.key) {
      ......
    }
  }

  • 第三轮循环

比较过程图解及描述如下

  1. newStartNode和oldStartNode之间比较，即p-key:2与p-key:1两者比较，key不相同，不可复用，什么都不用做。
  2. newEndNode和oldEndNode之间比较，即p-key:1与p-key:2两者比较，key不相同，不可复用，什么都不用做。
  3. newEndNode和oldStartNode之间比较，即p-key:1与p-key:1两者比较，key相同，可以复用。
  4. 第三个步骤已生效，newStartNode和oldEndNode之间，即p-key:2与p-key:2本轮不会比较。

在3这种情况下，确实找到可复用的真实DOM，接下来就需要将新旧两个vnode进行patchNode，然后再控其对应的真实DOM移动到适当的位置即可。关于DOM的移动，我们可以这么来描述：将oldStartNode对应的真实DOM移动到oldEndNode对应的真实DOM之后。如此这个vnode就已经处理完了，最后将newEndIndex--，oldStartIndex++，对应的图解与代码如下。

  while(newStartIndex <= newEndIndex && oldStartIndex <= oldEndIndex) {
    ......
    ......
    if (newStartNode.key === oldStartNode.key) {

    } else if (newEndNode.key === oldEndNode.key) {
      ......
    } else if (newEndNode.key === oldStartNode.key) {
      patchNode(newEndNode, oldStartNode, container)

      insert(newEndNode.el, container, oldEndNode.el.nextSibling)

      newEndIndex--
      oldStartIndex++
    } else if (newStartNode.key === oldEndNode.key) {
      ......
    }
  }

  • 第四轮循环

比较过程图解及描述如下

  1. newStartNode和oldStartNode之间比较，即p-key:2与p-key:2两者比较，key相同，可以复用。
  2. 第一个步骤已生效，newEndNode和oldEndNode之间，即p-key:2和p-key:2之间本轮不会比较。
  3. 第一个步骤已生效，newEndNode和oldStartNode之间，即p-key:2和p-key:2之间本轮不会比较。
  4. 第一个步骤已生效，newStartNode和oldEndNode之间，即p-key:2与p-key:2之间本轮不会比较。

在1这种情况下，确实找到可复用的真实DOM，接下来就需要将新旧两个vnode进行patchNode，两个节点目前都处于列表的头部，因此不需要将其对应的真实DOM进行移动，最后将newStartIndex和oldStartIndex分别+1，此时不满足循环条件while循环终止。对应的代码如下

  while(newStartIndex <= newEndIndex && oldStartIndex <= oldEndIndex) {
    ......
    ......
    if (newStartNode.key === oldStartNode.key) {
      patchNode(newStartNode, oldStartNode, container)

      newStartIndex++
      oldStartIndex++
    } else if (newEndNode.key === oldEndNode.key) {
      ......
    } else if (newEndNode.key === oldStartNode.key) {
      ......
    } else if (newStartNode.key === oldEndNode.key) {
      ......
    }
  }

  • 结束循环

结束上一轮循环后，newStartIndex <= newEndIndex && oldStartIndex <= oldEndIndex已不满足，各列表的状态如下图，可以看到此时的真实DOM列表已经跟newChildren列表顺序一致了。

“非理想children”处理方式

脱离四种情况的示例

拿以下示例，套用“理想children”循环比较算法

const oldNode = {
  type: 'div',
  children: [
      {type: 'p', key: '1'},
      {type: 'p', key: '2'},
      {type: 'p', key: '3'}，
      {type: 'p', key: '4'}
  ]
}
const newNode = {
  type: 'div',
  children: [
    {type: 'p', key: '2'},
    {type: 'p', key: '4'},
    {type: 'p', key: '1'}，
    {type: 'p', key: '3'}
  ]
}

  • 第一轮循环

通过以上图解 可以看得出，前边描述的四个比较方法都不适用于本轮循环，此时可以遍历oldChildren找到与newStartNode相匹配的节点进行patch，再将其对应的真实DOM移动到oldStartNode之前，patch结束以后将oldChildren中的那个节点置为undefined表示该节点已被处理过，图解与代码如下

 

  while(newStartIndex <= newEndIndex && oldStartIndex <= oldEndIndex) {
    ......
    ......
    if (newStartNode.key === oldStartNode.key) {
      ......
    } else if (newEndNode.key === oldEndNode.key) {
      ......
    } else if (newEndNode.key === oldStartNode.key) {
      ......
    } else if (newStartNode.key === oldEndNode.key) {
      ......
    } else {
      const nodeIndex = oldChildren.findIndex(n => n?.key === newStartNode.key)

      if (nodeIndex !== -1) {
        patchNode(newStartNode, oldChildren[nodeIndex], container)

        insert(newStartNode.el, container, oldStartNode.el)

        oldChildren[nodeIndex] = undefined

        newStartIndex++
      }
    }
  }
 

  •  
    第二轮循环
     


第二轮循环可以匹配到“理想children”循环的第4种情况，找到可复用的真实DOM，接下来就需要将新旧两个vnode进行patchNode，然后再控其对应的真实DOM移动到适当的位置即可。关于DOM的移动，我们可以这么来描述：将oldEndNode对应的真实DOM移动到oldStartNode对应的真实DOM之前。如此这个vnode就已经处理完了，最后将newStartIndex++，oldEndIndex--，图解如下 
 

 

  •  
    第三轮循环
     


第三轮循环可以匹配到“理想children”循环的第1种情况，找到可复用的真实DOM，接下来就需要将新旧两个vnode进行patchNode，两个节点目前都处于列表的头部，因此不需要将其对应的真实DOM进行移动，最后将newStartIndex和oldStartIndex分别+1。图解如下
 

 

  •  
    第四轮循环
     


第四轮循环开始时各列表是如下状态
 

 oldStartIndex指向的是undefined，可以直接让oldStartIndex++，开始下一轮循环。同理，如果oldEndIndex指向undefined的时候也可以直接让oldEndIndex--，开始下一轮循环。代码如下
 

 

  while(newStartIndex <= newEndIndex && oldStartIndex <= oldEndIndex) {
    ......
    ......
    
    if (!oldStartNode) {
      oldStartIndex++
    } else if (!oldEndNode) {
      oldEndIndex--
    } else if (newStartNode.key === oldStartNode.key) {
      ......
    } else if (newEndNode.key === oldEndNode.key) {
      ......
    } else if (newEndNode.key === oldStartNode.key) {
      ......
    } else if (newStartNode.key === oldEndNode.key) {
      ......
    } else {
      ......
    }
  }
 

  •  
    第五轮循环
     


当循环到第五轮的时候，两个子节点列表都只剩下了p - key:3，可以匹配到“理想children”循环的第1种情况，找到可复用的真实DOM，接下来就需要将新旧两个vnode进行patchNode，两个节点目前都处于列表的头部，因此不需要将其对应的真实DOM进行移动，最后将newStartIndex和oldStartIndex分别+1。图解如下
 

 

  •  
    结束循环
     


结束上一轮循环后，newStartIndex <= newEndIndex && oldStartIndex <= oldEndIndex已不满足，各列表的状态如下图，可以看到此时的真实DOM列表已经跟newChildren列表顺序一致了。
 

 

添加新元素
 

拿以下示例，套用之前讲过的循环比较算法
 

const oldNode = {
  type: 'div',
  children: [
      {type: 'p', key: '1'},
      {type: 'p', key: '2'},
      {type: 'p', key: '3'}，
  ]
}
const newNode = {
  type: 'div',
  children: [
    {type: 'p', key: '4'},
    {type: 'p', key: '3'},
    {type: 'p', key: '1'}，
    {type: 'p', key: '2'}
  ]
}
 

  •  
    第一轮循环
     


 

 

 

通过以上图解可以看得出，前边描述的四个比较方法都不适用于本轮循环，遍历oldChildren找不到与newStartNode相匹配的节点。此时就可以判定newStartNode是个新节点，且其顺序是排在oldStartNode之前的，因此可以直接仿照简单diff算法中“添加新元素”的方法来完成，完成以后将oldStartIndex++。
 

  while(newStartIndex <= newEndIndex && oldStartIndex <= oldEndIndex) {
    ......
    ......
    if (!oldStartNode) {
      oldStartIndex++
    } else if (!oldEndNode) {
      oldEndIndex--
    } else if (newStartNode.key === oldStartNode.key) {
      ......
    } else if (newEndNode.key === oldEndNode.key) {
      ......
    } else if (newEndNode.key === oldStartNode.key) {
      ......
    } else if (newStartNode.key === oldEndNode.key) {
      ......
    } else {
      const nodeIndex = oldChildren.findIndex(n => n?.key === newStartNode.key)
      if (nodeIndex !== -1) {
        ......
      } else {
        patchNode(newStartNode, null, container, oldStartNode.el)
        newStartIndex++
      }
    }
  }
 

  •  
    后序循环
     


经过第一轮循环后，各列表的状态如图
 

 可以看出，后序就如同“理想children”的循环比较一样了，这里不再赘述。最终得到的状态如下，此时的真实DOM列表已经跟newChildren列表顺序一致了
 

 循环结束newStartIndex <= newEndIndex
 

 

 

拿以下示例，套用目前的循环比较算法
 

const oldNode = {
  type: 'div',
  children: [
      {type: 'p', key: '1'},
  ]
}
const newNode = {
  type: 'div',
  children: [
    {type: 'p', key: '4'},
    {type: 'p', key: '1'},
  ]
}
 

 

 根据以上图解可以看出，第一轮while循环适用于前边说的第二种情况，但经过一轮循环后oldStartIndex就大于oldEndIndex了，while循环随即停止。显然这个现象是不能满足要求的，因此我们必须再开一个while循环，以newStartIndex <= newEndIndex作为条件，继续把剩余的新节点插入到oldStartNode之前。具体代码如下
 

  while(newStartIndex <= newEndIndex && oldStartIndex <= oldEndIndex) {
    ......
    ......
    ......
  }
  
  while(newStartIndex <= newEndIndex) {
    patchNode(newChildren[newStartIndex], null, container, oldStartNode.el)
    newStartIndex++
  }
 

移除旧元素
 

拿以下示例，套用目前的循环比较算法
 

const oldNode = {
  type: 'div',
  children: [
      {type: 'p', key: '1'},
      {type: 'p', key: '2'},
  ]
}
const newNode = {
  type: 'div',
  children: [
    {type: 'p', key: '1'},
  ]
}
 

 

 根据以上图解可以看出，第一轮while循环适用于前边说的第一种情况，但经过一轮循环后newStartIndex就大于newEndIndex了，while循环随即停止。显然这个现象是不能满足要求的，因此我们必须再开一个while循环，以oldStartIndex <= oldEndIndex作为条件，将遍历到的节点按照简单diff算法 中的“移除不存在元素”的方法移除掉。具体代码如下
 

 

  while(newStartIndex <= newEndIndex && oldStartIndex <= oldEndIndex) {
    ......
    ......
    ......
  }
  while(newStartIndex <= newEndIndex) {
    ......
  }
  while(oldStartIndex <= oldEndIndex) {
    unmount(oldChildren[oldStartIndex])
    oldStartIndex++
  }
  
 

完整diff代码
 

/**
 * 
 * @param {新节点} newNode 
 * @param {旧节点} oldNode 
 * @param {父节点} container 
 */
const patchChildren = (newNode, oldNode, container) => {
  const newChildren = newNode.children;
  const oldChildren = oldNode.children;

  let newStartIndex = 0
  let newStartNode
  let newEndIndex = newChildren.length - 1
  let newEndNode


  let oldStartIndex = 0
  let oldStartNode
  let oldEndIndex = oldChildren.length - 1
  let oldEndNode


  while(newStartIndex <= newEndIndex && oldStartIndex <= oldEndIndex) {
    newStartNode = newChildren[newStartIndex]
    newEndNode = newChildren[newEndIndex]

    oldStartNode = oldChildren[oldStartIndex]
    oldEndNode = oldChildren[oldEndIndex]

    // 若当前的oldStartNode和oldEndNode为undefined，说明它已经被处理过了，需要跳过。
    if (!oldStartNode) {
      oldStartIndex++
    } else if (!oldEndNode) {
      oldEndIndex--
    } else if (newStartNode.key === oldStartNode.key) {
      patchNode(newStartNode, oldStartNode, container)

      newStartIndex++
      oldStartIndex++
    } else if (newEndNode.key === oldEndNode.key) {
      patchNode(newEndNode, oldEndNode, container)

      newEndIndex--
      oldEndIndex--
    } else if (newEndNode.key === oldStartNode.key) {
      patchNode(newEndNode, oldStartNode, container)

      insert(newEndNode.el, container, oldEndNode.el.nextSibling)

      newEndIndex--
      oldStartIndex++
    } else if (newStartNode.key === oldEndNode.key) {
      patchNode(newStartNode, oldEndNode, container)

      insert(newStartNode.el, container, oldStartNode.el)

      newStartIndex++
      oldEndIndex--
    } else {
      const nodeIndex = oldChildren.findIndex(n => n?.key === newStartNode.key)

      if (nodeIndex !== -1) {
        patchNode(newStartNode, oldChildren[nodeIndex], container)

        insert(newStartNode.el, container, oldStartNode.el)

        oldChildren[nodeIndex] = undefined

        newStartIndex++
      } else {

        patchNode(newStartNode, null, container, oldStartNode.el)
        newStartIndex++
      }
    }
  }

  while(newStartIndex <= newEndIndex) {
    patchNode(newChildren[newStartIndex], null, container, oldStartNode.el)
    newStartIndex++
  }

  while(oldStartIndex <= oldEndIndex) {
    unmount(oldChildren[oldStartIndex])
    oldStartIndex++
  }

};
 


                

        

    

    
  



    



                



	

		

			

				
					
Vue渲染器（四）：双端diff算法

				
			

			

				

					Zzh1110的博客
				

				

					12-14
					
					841
					
				

			

		

		

			
				
这章介绍了双端Diff算法的原理和优势，简单来说主要通过新旧vnode的前后指针来判断，有四种命中情况，命中一种则不再进行判断。

			
		

	



                

            
              



	

		

			

				
					
vue源码学习 深入patch diff双端对比算法

				
			

			

				

					一袋米要扛几楼_
				

				

					04-03
					
					1276
					
				

			

		

		

			
				
什么时候调用patch
在beforeMount和mounted之间，会执行options.render函数生成新的VNode树。然后调用vm._update(新VNode)更新，然后进入到patch阶段。
// src/core/instance/lifecycle.js
export function mountComponent (
  vm: Component,
  el: ?Eleme...

			
		

	



              


  
              

                


	

		

			

				
					
【vue设计与实现】双端Diff算法 1-双端比较的原理和优势

				
			

			

				

					loyd3的博客
				

				

					09-16
					
					1230
					
				

			

		

		

			
				
前面介绍了简单Diff算法的实现原理，虽然简单Diff算法有很多有点，但是缺陷也很多，这些缺陷可以通过双端Diff算法解决简单Diff算法的问题在于，对DOM的移动操作并不是最优的，有时理论上只需要移动一次的DOM操作，使用简单Diff算法却移动了两次，而双端Diff算法就可以做到。顾名思义，双端Diff算法是一种同时对新旧两组子节点的两个端点进行比较的算法，因此需要四个索引值来分别指向新旧两组子节点的端点。

			
		

	





	

		

			

				
					
vue中的diff算法

					
热门推荐

				
			

			

				

					田兴的博客
				

				

					01-15
					
					2万+
					
				

			

		

		

			
				
一、是什么diff算法

diff 算法是一种通过同层的树节点进行比较的高效算法

其有两个特点：

比较只会在同层级进行, 不会跨层级比较
在diff比较的过程中，循环从两边向中间比较

diff 算法的在很多场景下都有应用，在 vue 中，作用于虚拟 dom 渲染成真实 dom 的新旧 VNode 节点比较
二、比较方式
diff整体策略为：深度优先，同层比较

比较只会在同层级进行, 不会跨层级比较

比较的过程中，循环从两边向中间收拢

下面举个vue通过diff算法更新的例子：

新旧VNode节

			
		

	



		

			
		



	

		

			

				
					
vue源码解析——diff算法/双端比对/patchFlag/最长递增子序列

				
			

			

				

					涵盖了计算机专业基础知识、数学建模相关实践、复杂网络论文研究、LeetCode算法刷题经验、C语言开发经验、前端Vue、React框架开发实战相关知识
				

				

					04-14
					
					2981
					
				

			

		

		

			
				
虚拟dom——virtual dom，提供一种简单js对象去代替复杂的 dom 对象，从而优化 dom 操作。virtual dom 是“解决过多的操作 dom 影响性能”的一种解决方案。virtual dom 很多时候都不是最优的操作，但它具有普适性，在效率、可维护性之间达到平衡。


diff 算法是一种优化手段，将前后两个模块进行差异化比较，修补(更新)差异的过程叫做 patch，也叫打补丁。只有当新旧子节点的类型都是多个子节点时，核心 Diff 算法才派得上用场。diff的目的是时间换空间：尽可能通

			
		

	





	

		

			

				
					
vue.js 3设计与实现 -- 双端 Diff 算法

					
最新发布

				
			

			

				

					qq_36973122的博客
				

				

					02-05
					
					1113
					
				

			

		

		

			
				
哪些节点是新节点呢？因此，我们需要将节点 p-1 对应的真实 DOM 移动到旧的一组子节点的尾部节点 p-2 所对应的真实 DOM 后面，同时还需要更新相应的索引到下一个位置，如图 10-9 所示。​	如上面的代码所示，如果旧的一组子节点的头部节点与新的一组子节点的尾部节点匹配， 则说明该旧节点所对应的真实 DOM 节点需要移动到尾部。于是我们尝试拿新的一组子节点中的头部节点 p-4 去旧的一组子节点中寻找具有相同 key 值的节点，但在旧的一组子节点中根本就没有 p-4 节点，如图 10-26 所示。

			
		

	





	

		

			

				
					
详解vue的diff算法原理

				
			

			

				

					08-27
				

			

		

		

			
				
Vue的diff算法原理详解  在本文中，我们将详细介绍 Vue 的 diff 算法原理，diff 算法是 Vue 框架中的一种关键技术，用于高效地更新虚拟 DOM 和真实 DOM。本文将从以下几个方面来介绍 diff 算法的原理：  1. 何时更新...

			
		

	





	

		

			

				
					
一文搞懂Vue Diff算法

				
			

			

				

					小王的技术库
				

				

					12-14
					
					1539
					
				

			

		

		

			
				
简单diff算法便是拿新节点数组中的节点去旧节点数组中查找，通过key来判断是否可以复用。并记录当前的lastIdx，以此来判断节点间的相对位置是否发生变化，如果变化，需要进行移动。双端diff算法的优势在于对于一些比较特殊的情况能更快的对节点进行处理，也更贴合实际开发。而双端的含义便在于通过两组子节点的头尾分别进行比较并更新。最近找到一个VUE的文档，它将VUE的各个知识点进行了总结，整理成了《Vue 开发必须知道的36个技巧》。内容比较详实，对各个知识点的讲解也十分到位。

			
		

	





	

		

			

				
					
vue3-diff算法-最长递增子序列

				
			

			

				

					xbczrz的博客
				

				

					01-05
					
					849
					
				

			

		

		

			
				
最长递增子序列（LIS）是指在一个序列中，求出一个子序列，使得这个子序列元素的数值递增，且是原序列中长度最长的。

			
		

	





	

		

			

				
					
vue的diff算法的【双端比较】策略

				
			

			

				

					yiguoxiaohai的博客
				

				

					08-08
					
					668
					
				

			

		

		

			
				
vue的diff算法的双端比较策略

			
		

	





	

		

			

				
					
双端Diff算法

				
			

			

				

					dfc_dfc的博客
				

				

					01-22
					
					1252
					
				

			

		

		

			
				
双端Diff算法分享

			
		

	





	

		

			

				
					
深入Vue2 Diff算法

				
			

			

				

					Sideremens的博客
				

				

					07-29
					
					3522
					
				

			

		

		

			
				
作者简介：汪玉林，高级工程师，增值产品部前端Leader，目前团队负责手Q游戏中心、手Q游戏运营、手Q阅读等项目，有丰富的Web前端架构经验。
一、前言
Vue的核心是双向绑定和虚拟DOM（下文我们简称为vdom），关于双向绑定可以参阅木琴的文章《剖析Vue原理&实现双向绑定MVVM》，vdom是树状结构，其节点为vnode，vnode和浏览器DOM中的Node一一对应，通过vnode的e...

			
		

	





	

		

			

				
					
vuejs 设计与实现 - 双端diff算法

				
			

			

				

					weixin_38245947的博客
				

				

					08-09
					
					869
					
				

			

		

		

			
				
我们介绍了简单 Diff 算法的实现原理。简单 Diff 算法利用虚拟节点的 key 属性，尽可能地复用 DOM元素，并通过移动 DOM的方式来完成更新，从而减少不断地创建和销毁 DOM 元素带来的性能开销。但是，简单 Diff 算法仍然存在很多缺陷，这些缺陷可以通过本章将要介绍的双端 Diff 算法解决。

			
		

	





	

		

			

				
					
深入学习Vue.js（七）双端Diff算法

				
			

			

				

					volit的博客
				

				

					01-08
					
					634
					
				

			

		

		

			
				
简单Diff算法利用虚拟节点的key属性，尽可能地复用DOM元素，并通过移动DOM的方式来完成更新，从而减少不断地创建和销毁DOM元素带来的性能开销。而简单Diff算法的问题就在于，它的移动操作并不是最优的。而双端Diff算法，顾名思义，就是一种同时对新旧两组子节点的两个端点进行比较的算法。因此需要四个索引值，分别指向新旧两组子节点的两个端点。

			
		

	





	

		

			

				
					
【Vue.js设计与实现】第三篇第10章：渲染器-双端 Diff 算法-阅读笔记

				
			

			

				

					karshey的博客
				

				

					10-18
					
					1089
					
				

			

		

		

			
				
本章我们介绍了双端 Diff 算法的原理及其优势。双端 Diff 算法指的是，在新旧两组子节点的四个端点之间分别进行比较，并试图找到可复用的节点。相比简单 Diff 算法，双端 Diff 算法的优势在于，对于同样的更新场景，执行的 DOM 移动操作次数更少。

			
		

	





	

		

			

				
					
VUE DIFF算法之双端DIFF

				
			

			

				

					王亮的博客
				

				

					02-11
					
					977
					
				

			

		

		

			
				
VUE 双端DIFF原理讲解及实践练习

			
		

	





	

		

			

				
					
聊聊 Vue 的双端 diff 算法

				
			

			

				

					老司机的后备箱
				

				

					09-17
					
					436
					
				

			

		

		

			
				
React 和 Vue 都是基于 vdom 的前端框架，组件产生 vdom，渲染器再把 vdom 通过增删改的 dom api 更新到 dom。当再次渲染出 vdom 时，就要新旧两棵 vdom 树做 diff，只更新变化的 dom 节点。两棵树的 diff 是 O(n^3) 的，时间复杂度太高，因此前端框架规定了只做同层 diff，还有 type 不一样就认为节点不一样，不再对比子节点。这样时间复杂度一下子就降到了 O(n)。

			
		

	





	

		

			

				
					
简单diff算法与双端diff算法实现思路

				
			

			

				

					m0_73704086的博客
				

				

					04-19
					
					407
					
				

			

		

		

			
				
简单diff是基于递归来实现的，它适用于对比树形数据结构之间的差异vue2.x就是使用的简单diff算法实现思路是递归比较两个树的每个节点，如果两个节点相同，就比较它们的子节点，如果不同，就标记为删除或添加，并且停止递归缺点的话就是只能比较树形数据结构，不能比较其他数据结构。

			
		

	





	

		

			

				
					
双端 Diff 算法原理解析及 snabbdom 简单实现

				
			

			

				

					郊眠寺
				

				

					12-01
					
					378
					
				

			

		

		

			
				
整理了75个JS高频面试题，并给出了答案和解析，基本上可以保证你能应付面试官关于JS的提问。

			
		

	





	

		

			

				
					
深入理解Vue的diff算法

				
			

			

				

					
				

			

		

		

			
				
"本文详细解析了Vue的diff算法原理，探讨了Vue如何在数据变化时高效地更新DOM。文章深入浅出地介绍了虚拟DOM的概念、diff的比较策略以及patch函数的核心功能。"  Vue.js是一个流行的前端JavaScript框架，它采用虚拟...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值