深入浅出Vue3 Diff算法：从简单到复杂的演进之路

最新推荐文章于 2025-04-29 17:03:13 发布
最新推荐文章于 2025-04-29 17:03:13 发布
阅读量1k 收藏 9
点赞数 22
文章标签： 算法 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/W1391517383/article/details/147443285
版权

深入浅出Vue3 Diff算法：从简单到复杂的演进之路

大家好，我是有一点想法的火星人thinkmars，最近在学习前端框架的设计思路，想更深入了解框架的原理。今天主要想学习传说中的Vue的diff算法。我不想一次性就读懂vue3的最新的算法，而是循序渐进，从最简单的diff算法版本开始理解，逐步读懂最终版本。

前言：为什么需要Diff算法？

在前端开发中，当数据变化时，我们需要高效地更新用户界面。直接销毁整个DOM并重新创建虽然简单，但性能代价极高。这就如同每次搬家都把旧家具全部扔掉买新的，显然不是明智之举。

Diff算法就像一位精明的搬家师傅，它能精准找出哪些"家具"（DOM节点）可以保留，哪些需要调整位置，哪些需要更新，从而实现最高效的界面更新。Vue3的Diff算法通过一系列精妙优化，将这个"搬家"过程做到了极致。

一、基础篇：最朴素的递归对比

算法流程

是

否

开始对比

类型相同?

更新属性

替换节点

递归对比子节点

结束

示例代码
 

javascript
 

代码解读
 

复制代码
 

function diff(oldNode, newNode) { // 1. 如果节点类型不同，直接替换 if (oldNode.type !== newNode.type) { replaceNode(oldNode, newNode) return } // 2. 更新节点属性 updateProps(oldNode, newNode) // 3. 递归对比子节点 const oldChildren = oldNode.children const newChildren = newNode.children for (let i = 0; i < Math.max(oldChildren.length, newChildren.length); i++) { diff(oldChildren[i], newChildren[i]) } } 
 

这是Diff算法最基础的实现方式，简单直接：
 

  • 如果节点类型不同，直接替换
  • 如果相同，更新属性后递归对比所有子节点
 

缺点：性能极差，时间复杂度达到O(n³)，完全没有复用节点的概念，如同搬家时把每件家具都拆成零件再重新组装。
 

 

二、进化篇：引入key实现节点复用(Vue1.x)
 

关键优化
 

 

是
 

否
 

是
 

否
 

建立旧节点key映射
 

遍历新节点
 

找到相同key?
 

复用节点
 

新建节点
 

检查位置变化
 

需要移动?
 

移动节点
 

保持原位
 

示例代码
 

 

javascript
 

代码解读
 

复制代码
 

function diff(oldChildren, newChildren) { const map = new Map() // 建立旧节点的key映射 oldChildren.forEach((child, index) => { if (child.key) map.set(child.key, { child, index }) }) newChildren.forEach((newChild, newIndex) => { if (newChild.key && map.has(newChild.key)) { // 找到可复用的节点 const { child: oldChild, index: oldIndex } = map.get(newChild.key) patch(oldChild, newChild) // 更新节点内容 // 简单位置调整 if (oldIndex !== newIndex) { moveNode(oldChild, newIndex) } map.delete(newChild.key) // 已处理 } else { // 新增节点 mount(newChild) } }) // 删除未复用的旧节点 map.forEach(({ child }) => unmount(child)) } 
 

通过给节点添加唯一的key，算法可以：
 

  1. 建立旧节点的key映射表
  2. 新节点通过key快速找到可复用的旧节点
  3. 比较位置变化，决定是否需要移动
 

进步：时间复杂度降至O(n)，实现了基本的节点复用 不足：移动策略简单，可能产生大量不必要的DOM操作
 

 

三、进阶篇：双端比较算法（Vue2核心）
 

四指针策略
 

 

匹配
 

不匹配
 

匹配
 

不匹配
 

匹配
 

不匹配
 

匹配
 

不匹配
 

头头比较
 

指针后移
 

尾尾比较
 

指针前移
 

旧头新尾比较
 

移动节点
 

旧尾新头比较
 

移动节点
 

key查找
 

示例代码
 

 

javascript
 

代码解读
 

复制代码
 

function diff(oldChildren, newChildren) { let oldStartIdx = 0, oldEndIdx = oldChildren.length - 1 let newStartIdx = 0, newEndIdx = newChildren.length - 1 while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) { // 头头比较 if (isSameNode(oldChildren[oldStartIdx], newChildren[newStartIdx])) { patch(oldChildren[oldStartIdx], newChildren[newStartIdx]) oldStartIdx++ newStartIdx++ } // 尾尾比较 else if (isSameNode(oldChildren[oldEndIdx], newChildren[newEndIdx])) { patch(oldChildren[oldEndIdx], newChildren[newEndIdx]) oldEndIdx-- newEndIdx-- } // 旧头-新尾比较（处理翻转情况） else if (isSameNode(oldChildren[oldStartIdx], newChildren[newEndIdx])) { patch(oldChildren[oldStartIdx], newChildren[newEndIdx]) moveNode(oldChildren[oldStartIdx], oldChildren[oldEndIdx].el.nextSibling) oldStartIdx++ newEndIdx-- } // 旧尾-新头比较 else if (isSameNode(oldChildren[oldEndIdx], newChildren[newStartIdx])) { patch(oldChildren[oldEndIdx], newChildren[newStartIdx]) moveNode(oldChildren[oldEndIdx], oldChildren[oldStartIdx].el) oldEndIdx-- newStartIdx++ } // 以上都不匹配时，用key查找 else { const keyIndexMap = createKeyMap(newChildren, newStartIdx, newEndIdx) const oldKey = oldChildren[oldStartIdx].key if (keyIndexMap.has(oldKey)) { const newIndex = keyIndexMap.get(oldKey) patch(oldChildren[oldStartIdx], newChildren[newIndex]) moveNode(oldChildren[oldStartIdx], newChildren[newStartIdx].el) } else { unmount(oldChildren[oldStartIdx]) } oldStartIdx++ } } // 处理新增或删除的节点 if (oldStartIdx > oldEndIdx && newStartIdx <= newEndIdx) { // 新增节点 mountRange(newChildren, newStartIdx, newEndIdx) } else if (newStartIdx > newEndIdx && oldStartIdx <= oldEndIdx) { // 删除节点 unmountRange(oldChildren, oldStartIdx, oldEndIdx) } } 
 

Vue2采用的四指针策略能高效处理常见场景：
 

  1. 头头比较：处理列表开头新增
  2. 尾尾比较：处理列表末尾新增
  3. 交叉比较：处理列表反转等特殊情况
  4. key查找：作为最后手段保证正确性
 

优势：特别擅长处理列表头尾变化 局限：对中间乱序部分处理效率不高
 

 

四、革新篇：最长递增子序列优化（Vue3核心）
 

LIS算法应用
 

 

剩余节点
 

建立key映射
 

记录新旧位置关系
 

计算LIS
 

确定稳定序列
 

仅移动非稳定节点
 

示例代码
 

 

javascript
 

代码解读
 

复制代码
 

function diff(oldChildren, newChildren) { // ...双端比较代码同上... // 处理剩余无法通过双端比较的节点 if (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) { const newRemaining = newChildren.slice(newStartIdx, newEndIdx + 1) const oldRemaining = oldChildren.slice(oldStartIdx, oldEndIdx + 1) // 1. 建立key到新索引的映射 const keyToNewIndex = new Map() newRemaining.forEach((child, index) => { if (child.key) keyToNewIndex.set(child.key, newStartIdx + index) }) // 2. 遍历旧节点，建立新旧索引映射 const newIndexToOldIndex = new Array(newRemaining.length).fill(-1) for (let oldIndex = oldStartIdx; oldIndex <= oldEndIdx; oldIndex++) { const oldChild = oldChildren[oldIndex] const newIndex = oldChild.key ? keyToNewIndex.get(oldChild.key) : null if (newIndex === undefined) { unmount(oldChild) } else { newIndexToOldIndex[newIndex - newStartIdx] = oldIndex patch(oldChild, newChildren[newIndex]) } } // 3. 计算最长递增子序列 const lis = getSequence(newIndexToOldIndex.filter(i => i !== -1)) let lisPtr = lis.length - 1 // 4. 从后向前处理移动和挂载 for (let i = newRemaining.length - 1; i >= 0; i--) { const newIndex = newStartIdx + i const newChild = newChildren[newIndex] if (newIndexToOldIndex[i] === -1) { // 新增节点 mount(newChild) } else { if (lisPtr < 0 || i !== lis[lisPtr]) { // 需要移动的节点 moveNode(newChild, getAnchor(newIndex)) } else { // 保持不动的节点 lisPtr-- } } } } } // 计算最长递增子序列（简化版） function getSequence(arr) { // ...实现LIS算法... } 
 

当双端比较完成后，Vue3对剩余乱序节点采用革命性的优化：
 

  1. 建立新旧节点位置映射
  2. 计算 最长递增子序列(LIS) 找出最长的稳定节点序列
  3. 只移动不在稳定序列中的节点
 

示例：
 

旧节点：A B C D E
 新节点：A D B C E
 LIS结果为[B,C]，因此只需移动D一次
 

 

五、终极形态：Vue3的完整优化体系
 

Vue3的Diff算法不是单一优化，而是一套组合拳：
 

优化策略作用类比解释
静态提升跳过静态节点对比搬家时不动的家具直接保留
Patch Flags细粒度属性更新只清洁脏了的家具部分
Block Tree以动态区块为单位更新按房间打包搬运家具
事件缓存避免重复绑定事件家具上的装饰品不需要重新安装
SSR优化服务端渲染激活时高效处理新房子的家具定位更快速
 

 

javascript
 

代码解读
 

复制代码
 

// Vue3的diff核心逻辑（概念代码） function patch(oldVNode, newVNode) { if (oldVNode.staticFlag) return // 静态节点跳过 // 选择性更新标记过的属性 if (newVNode.patchFlag & PatchFlags.CLASS) { updateClass(oldVNode, newVNode) } // 区块化更新 if (newVNode.dynamicChildren) { patchBlockChildren(oldVNode, newVNode) // 只更新动态子节点 } else { diffChildren(oldVNode, newVNode) // 全量diff } } 
 

 

结语：追求极致的艺术
 

Vue3的Diff算法演进历程，展现了对性能极致追求的工匠精神。从最初的简单递归，到引入key复用，再到双端比较，最后通过LIS算法实现最小化DOM操作，未来Vue3.6版本还会进一步提升性能，每一步优化都凝聚着开发者智慧的结晶。
 

理解这些算法背后的思想，不仅能帮助我们更好地使用Vue框架，更能培养出解决复杂问题的系统性思维。当你下次看到界面流畅更新时，不妨想想背后这个精妙的"搬家"过程，感受前端工程化的艺术之美。
 

正如Vue作者尤雨溪所说："框架的性能优化就像是在针尖上跳舞，每一个字节的节省都值得庆祝。" Vue3的Diff算法，正是这种精神的完美体现。
 

 

 
 
原文：https://juejin.cn/post/7495946573559824422
 


                

        

    

  



    


                



	

		

			

				
					
深入理解 Vue3 的虚拟 DOM 与渲染机制

				
			

			

				

					mmc123125的博客
				

				

					12-27
					
					1041
					
				

			

		

		

			
				
虚拟 DOM 是真实 DOM 的轻量级抽象，它以 JavaScript 对象的形式描述 DOM 树结构，通过 Diff 算法找出新旧虚拟 DOM 的差异，然后最小化更新真实 DOM，从而提高性能和开发效率。Vue3 的虚拟 DOM 是前端开发的里程碑，它不仅提升了性能，还简化了复杂 UI 的开发。未来，随着框架技术的演进，虚拟 DOM 或许会与更多新技术结合，为开发者提供更高效的工具与方案。

			
		

	



                

            
              



	

		

			

				
					
深入解析 Vue3 核心架构与实战范式：从响应式原理到 Composition API 设计哲学

				
			

			

				

					那谁的博客
				

				

					02-08
					
					594
					
				

			

		

		

			
				
Vue3 的架构突破印证了"组合优于继承"的软件设计原则。通过本文的深度剖析，开发者不仅能掌握技术细节，更能理解其背后"渐进式框架"的哲学思想。在 TypeScript 和 Composition API 的加持下，Vue3 正在重新定义大规模前端应用的开发范式。

			
		

	



              


  
              

                


	

		

			

				
					
Vue源码深度解析：从2.x到3.x的架构演进与核心原理剖析

				
			

			

				

					w1404273025的博客
				

				

					03-13
					
					639
					
				

			

		

		

			
				
维度Vue2Vue3响应式系统Proxy源码组织单体仓库Monorepo类型支持FlowTypeScript包体积完整打包按需引入性能优化手动优化编译时自动优化API设计Vue3的架构演进体现了现代前端框架的发展方向：更精细的模块化、更智能的编译优化、更强大的类型支持。通过深入源码理解其设计哲学，不仅能提升开发技能，更能帮助我们做出合理的架构决策。建议结合官方源码导读，从packages/reactivity模块开始逐步深入探索。

			
		

	





	

		

			

				
					
Vue中的虚拟DOM与Diff算法

				
			

			

				

					qq_41901200的博客
				

				

					09-03
					
					1220
					
				

			

		

		

			
				
针对vue中虚拟DOM和diff算法的理解与分析

			
		

	



		

			
		



	

		

			

				
					
Vue中diff算法的理解

				
			

			

				

					WindRunnerMax
				

				

					08-09
					
					2517
					
				

			

		

		

			
				
Vue中diff算法的理解
diff算法用来计算出Virtual DOM中改变的部分，然后针对该部分进行DOM操作，而不用重新渲染整个页面，渲染整个DOM结构的过程中开销是很大的，需要浏览器对DOM结构进行重绘与回流，而diff算法能够使得操作过程中只更新修改的那部分DOM结构而不更新整个DOM，这样能够最小化操作DOM结构，能够最大程度上减少浏览器重绘与回流的规模。
虚拟DOM
diff算法的基础是Virtual DOM，Virtual DOM是一棵以JavaScript对象作为基础的树，每一个节点称为V

			
		

	





	

		

			

				
					
Vue3开发从入门到精通

				
			

			

				

					YunWisdom
				

				

					11-08
					
					936
					
				

			

		

		

			
				
Vue3系统学习之路 - 全面教程

			
		

	





	

		

			

				
					
Vue开发实战进阶：从核心原理到工程化最佳实践

				
			

			

				

					桂月二二博客
				

				

					03-31
					
					410
					
				

			

		

		

			
				
答：Proxy替代Object.defineProperty，优化数组处理，实现属性级精准追踪。答：客户端激活(Hydration)、bundle渲染器、数据预取同步。答：去除Mutation简化流程、子模块自动代码拆分、更好的TS支持。答：逻辑复用困难、Options API组织混乱、TS支持不足。答：依然需要作为跨平台抽象的中间层，但Diff算法更智能。

			
		

	





	

		

			

				
					
Vuejs设计与实现 — 渲染器核心 Diff 算法

				
			

			

				

					weixin_43822185的博客
				

				

					10-23
					
					958
					
				

			

		

		

			
				
Vuejs设计与实现 — 渲染器核心 Diff 算法

			
		

	





	

		

			

				
					
Vue3之入门介绍

				
			

			

				

					一个老Java开发的自白
				

				

					12-14
					
					1594
					
				

			

		

		

			
				
# 总结
Vue 3是一个值得学习和掌握的优秀前端框架。无论是初学者还是经验丰富的开发者，都可以通过Vue 3来构建出高效、可维护和高性能的用户界面。希望本文能够为你提供一份全面、详细且易于理解的Vue 3入门指南，帮助你在前端开发的道路上走得更远、更稳。

			
		

	





	

		

			

				
					
Vue虚拟DOM与Diff算法：揭秘DOM操作的高效之道

				
			

			

				

					
				

			

		

		

			
				
本文详细介绍了Vue框架中虚拟DOM的概念、机制以及Diff算法的原理和实现，并深入探讨了这些技术在实践中的应用和优化。通过对虚拟DOM的数据结构和更新过程的解析，阐述了其如何提高Web应用的性能和开发效率。同时，...

			
		

	





	

		

			

				
					
10-vue-react-diff.md

				
			

			

				

					03-31
				

			

		

		

			
				
Vue的diff算法经历了从Vue 2到Vue 3的演进。  #### Vue 2 diff特点  Vue 2使用了一种双端比较的策略。它定义了四个指针，分别对应新旧节点列表的开始和结束，通过比较这四个位置的节点进行移动。这种方法旨在快速...

			
		

	





	

		

			

				
					
Vue.js虚拟DOM与diff算法：提升渲染性能的秘诀

				
			

			

				

					
				

			

		

		

			
				
[Vue.js虚拟DOM与diff算法：提升渲染性能的秘诀](https://img-blog.csdnimg.cn/1ea97ff405664344acf571acfefa13d7.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBASGFwcHlfY2hhbmdl...

			
		

	





	

		

			

				
					
代码随想录算法训练营Day31 | 56. 合并区间 738.单调递增的数字

				
			

			

				

					m0_74154872的博客
				

				

					04-26
					
					235
					
				

			

		

		

			
				
一个不重叠的区间数组，该数组需恰好覆盖输入中的所有区间。表示若干个区间的集合，其中单个区间为。请你合并所有重叠的区间，并返回。当且仅当每个相邻位数上的数字。的最大数字，且数字呈。时，我们称这个整数是。

			
		

	





	

		

			

				
					
算法之动态规划

				
			

			

				

					qq_68194402的博客
				

				

					04-21
					
					1665
					
				

			

		

		

			
				
动态规划（Dynamic Programming, DP）是一种解决复杂问题的算法设计技术，适用于具有“重叠子问题”和“最优子结构”性质的问题。动态规划将问题分解成更小的子问题，通过解决这些子问题来解决原始问题。这种方法的关键在于避免重复计算。一旦解决了一个子问题，它的解就被存储起来，以便后续需要时直接使用，从而避免了重复计算。这种记忆化的技术称为“缓存”。

			
		

	





	

		

			

				
					
【Torch】MaxPool1d、MaxPool2d、MaxPool3d算法详解

				
			

			

				

					zkw54334的博客
				

				

					04-29
					
					593
					
				

			

		

		

			
				
MaxPool1d 就是“挑时间窗口里最强的响应”来下采样——通道（特征）的语义不变，只有时间分辨率被压缩，从而提取局部最显著的时序信息并减少后续计算量。

			
		

	





	

		

			

				
					
基础排序方法

					
最新发布

				
			

			

				

					2301_79976271的博客
				

				

					04-29
					
					666
					
				

			

		

		

			
				
1.基本思想直接插入排序的实现，我们可以参考扑克牌的排序当我们要将新的牌插入现有牌堆时，保证当前手中的牌堆有序，再将新的牌与牌堆中的值进行比较，在进行比较与交换后，现在的牌堆就有序了。2.具体实现我们先进行单趟排序的实现，假设[0,end]的元素有序，这里即设第一个元素为有序的。此时要进行排序的元素为a[end+1]，将该元素依次与现有的有序牌堆进行比较。若当前值小于end处的值，交换。

			
		

	





	

		

			

				
					
(leetcode) 力扣100 4.移动零(两种O(n)方法 双指针)

				
			

			

				

					qq_62235017的博客
				

				

					04-29
					
					164
					
				

			

		

		

			
				
博主采用的思路很简单，不管原始数组如何，最后得到的数组形式是一样的，前面一串非0数字，最后几个连续的0，那么就不需要考虑交换的逻辑，而是去把数字放到他最后应该存在的位置即可。这道题整体思路简单，但题目提到，不能新建数组，那么目的很明确了，就是要求你在O（1）的空间复杂度和O（n）的时间复杂度完成这道题。整体来说，对于没接触过或不熟悉双指针的人来说，官方题解虽然优雅，但还是具有一定的思维难度，大家多联系即可。给定一个数组 nums，编写一个函数将所有 0 移动到数组的末尾，同时保持非零元素的相对顺序。

			
		

	





	

		

			

				
					
121. 买卖股票的最佳时机

				
			

			

				

					weixin_61695887的博客
				

				

					04-26
					
					775
					
				

			

		

		

			
				
返回你可以从这笔交易中获取的最大利润。如果你不能获取任何利润，返回。设计一个算法来计算你所能获取的最大利润。你只能买一次、卖一次（而且买入在前，卖出在后）。如果价格一直下降（没法盈利），返回。：O(1)（只用了常数变量）买入这只股票，并选择在。用当前价格减去历史最低价。：O(n)（只遍历一次）和最大利润比较，更新。

			
		

	





	

		

			

				
					
力扣——15三数之和

				
			

			

				

					2301_77433167的博客
				

				

					04-26
					
					949
					
				

			

		

		

			
				
不同的三元组是 [-1,0,1] 和 [-1,-1,2]。15. 三数之和 - 力扣（LeetCode）注意，输出的顺序和三元组的顺序并不重要。答案中不可以包含重复的三元组。唯一可能的三元组和不为 0。唯一可能的三元组和为 0。，判断是否存在三元组。

			
		

	





	

		

			

				
					
描述一下你对前端框架，比如Vue3的理解，为什么我们需要这么复杂的前端呢、

				
			

			

				

					03-14
				

			

		

		

			
				
$$ \text{Diff算法复杂度} \quad O(n^3) \xrightarrow{\text{Vue3优化}} O(n) $$  二、工程化价值 1. 组件化开发 通过单文件组件(SFC)实现关注点分离： ```html <template> <!-- 视图 --> <script> <!-- 逻辑 --> ...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

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

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值