手写简化版 Vue 3 虚拟 DOM：100 行代码搞懂 Diff 核心逻辑

手写简化版 Vue 3 虚拟 DOM：100 行代码搞懂 Diff 核心逻辑

在现代前端框架的浩瀚星空中，Vue 3 的虚拟 DOM（Virtual DOM）与 Diff 算法无疑是最璀璨的双子星。它们是数据驱动视图的底层基石，也是框架性能的“心脏”。要真正理解 Vue 3，不能只停留在 API 层面，必须深入其内核，看清它是如何通过精妙的算法，以最小的代价完成视图的极速更新。

与其在黑盒中猜测，不如亲手造一个“轮子”。下面，我将用不到 100 行核心代码，结合 Vue 3 的设计哲学，为你剖析虚拟 DOM 与 Diff 算法的灵魂。

一、 核心哲学：用空间换时间，以计算换操作

真实 DOM 的操作极其昂贵，每一次重排（Reflow）和重绘（Repaint）都是对性能的巨大消耗。Vue 3 的虚拟 DOM 本质上是一个轻量级的 JavaScript 对象，它是真实 DOM 的“设计图纸”。

工作流程只有三步：

1. 渲染： 状态变更生成新的虚拟 DOM 树。
2. Diff： 对比新旧两棵树，计算出最小差异（Patch）。
3. Patch： 将差异批量应用到真实 DOM。

这种“先在图纸上修改，再一次性施工”的策略，避免了盲目操作 DOM 带来的性能浪费。

二、 100 行代码实现核心逻辑

我们将实现三个核心函数：h（创建虚拟节点）、render（挂载/渲染）、patch（ Diff 与更新）。

// 1. h函数：创建虚拟节点 (VNode)functionh(tag,props,children){return{tag,props:props||{},children:children||[],el:null};}// 2. render函数：将虚拟DOM渲染为真实DOM（初始挂载）functionrender(vnode,container){if(typeofvnode==='string'){container.appendChild(document.createTextNode(vnode));return;}constel=document.createElement(vnode.tag);vnode.el=el;// 关联真实DOM// 设置属性for(constkeyinvnode.props){el.setAttribute(key,vnode.props[key]);}// 递归渲染子节点if(vnode.children){vnode.children.forEach(child=>render(child,el));}container.appendChild(el);}// 3. patch函数：Diff算法核心（更新逻辑）functionpatch(oldVNode,newVNode,container){// 3.1 节点类型不同，直接替换if(oldVNode.tag!==newVNode.tag){container.removeChild(oldVNode.el);render(newVNode,container);return;}constel=newVNode.el=oldVNode.el;// 复用真实DOM// 3.2 对比属性（简化版）constoldProps=oldVNode.props;constnewProps=newVNode.props;for(constkeyinnewProps){if(oldProps[key]!==newProps[key]){el.setAttribute(key,newProps[key]);}}for(constkeyinoldProps){if(!(keyinnewProps)){el.removeAttribute(key);}}// 3.3 对比子节点（Diff核心：双端比较 + Key优化）constoldChildren=oldVNode.children;constnewChildren=newVNode.children;// 情况A：新节点无children，删除旧子节点if(!newChildren.length){oldChildren.forEach(child=>container.removeChild(child.el));return;}// 情况B：旧节点无children，直接挂载新子节点if(!oldChildren.length){newChildren.forEach(child=>render(child,el));return;}// 情况C：都有children，进行双端比较（Vue 3 核心优化）letoldStart=0,oldEnd=oldChildren.length-1;letnewStart=0,newEnd=newChildren.length-1;letoldStartVnode=oldChildren[oldStart];letoldEndVnode=oldChildren[oldEnd];letnewStartVnode=newChildren[newStart];letnewEndVnode=newChildren[newEnd];// 同步头尾指针，跳过相同节点while(oldStart<=oldEnd&&newStart<=newEnd){// 头部相同if(oldStartVnode.key===newStartVnode.key){patch(oldStartVnode,newStartVnode,el);oldStart++;newStart++;oldStartVnode=oldChildren[oldStart];newStartVnode=newChildren[newStart];}// 尾部相同elseif(oldEndVnode.key===newEndVnode.key){patch(oldEndVnode,newEndVnode,el);oldEnd--;newEnd--;oldEndVnode=oldChildren[oldEnd];newEndVnode=newChildren[newEnd];}// 旧头新尾相同（移动节点）elseif(oldStartVnode.key===newEndVnode.key){el.insertBefore(oldStartVnode.el,oldEndVnode.el.nextSibling);patch(oldStartVnode,newEndVnode,el);oldStart++;newEnd--;oldStartVnode=oldChildren[oldStart];newEndVnode=newChildren[newEnd];}// 旧尾新头相同（移动节点）elseif(oldEndVnode.key===newStartVnode.key){el.insertBefore(oldEndVnode.el,oldStartVnode.el);patch(oldEndVnode,newStartVnode,el);oldEnd--;newStart++;oldEndVnode=oldChildren[oldEnd];newStartVnode=newChildren[newStart];}else{// 复杂情况：乱序比较（此处简化为查找并移动/新增）// Vue 3 实际使用 Key + LIS(最长递增子序列) 算法优化移动constkeyMap=newMap(oldChildren.map((v,i)=>[v.key,i]));constnewKeyIndex=newChildren.slice(newStart,newEnd+1).map(v=>keyMap.get(v.key));// 简单处理：遍历新节点，复用或创建newChildren.slice(newStart,newEnd+1).forEach(newChild=>{constoldIndex=keyMap.get(newChild.key);if(oldIndex!=null){// Key存在，复用constoldChild=oldChildren[oldIndex];if(oldChild)patch(oldChild,newChild,el);}else{// Key不存在，新增render(newChild,el);}});// 删除旧节点中多余的（简化处理，实际需更精细）break;}}// 处理剩余节点if(newStart<=newEnd){for(leti=newStart;i<=newEnd;i++){constanchor=newChildren[i+1]?newChildren[i+1].el:null;render(newChildren[i],el,anchor);}}if(oldStart<=oldEnd){for(leti=oldStart;i<=oldEnd;i++){el.removeChild(oldChildren[i].el);}}}

三、 深度解析：Vue 3 Diff 的三大“杀手锏”

上面的代码虽然简化，但已蕴含了 Vue 3 Diff 算法的精髓。相比 Vue 2，Vue 3 的性能飞跃主要源于以下三点：

1. 双端比较策略（快速收敛）

传统的 Diff 是单端遍历（从头比到尾），一旦中间插入或删除元素，后续节点全部错位，导致大量不必要的 DOM 操作。
Vue 3 采用双端比较（oldStart/oldEndvsnewStart/newEnd），同时从新旧子节点的头部和尾部进行对比。

• 场景： 列表头部新增一项，尾部删除一项。
• 效果：双端指针瞬间匹配头尾，中间部分直接跳过，时间复杂度从 O(n) 降至接近 O(1) 的常数级操作。这是 Vue 3 应对大规模列表渲染的核心武器。

2. Key 与 LIS 算法（最小化移动）

key不仅仅是为了消除警告，它是节点的“身份证”。

• 无 Key：Vue 采用“就地复用”策略，简单粗暴地按索引复用。如果列表是[A, B, C]变成[C, A, B]，Vue 会认为 A 变成了 C，B 变成了 A，导致大量错误的文本替换。
• 有 Key：Vue 能精准识别C是新增的，A和B只是移动了位置。
• LIS 算法：对于乱序的列表（如[1, 2, 3, 4]->[4, 1, 3, 2]），Vue 3 引入**最长递增子序列（LIS）**算法。它计算出哪些节点的相对顺序没有变（如1, 3），只移动那些破坏了递增序列的节点（如4, 2）。这保证了 DOM 移动次数最少，避免了“全量重绘”的灾难。

3. 编译时优化（静态提升与 Patch Flag）

Vue 3 的编译器极其智能，它在编译阶段就做了大量优化，这是运行时 Diff 无法比拟的：

• 静态提升（Hoisting）：模板中不包含动态绑定的节点（如纯文本<h1>Title</h1>），会被提升到渲染函数外部。每次渲染时直接复用，完全跳过 Diff 过程。
• Patch Flag（补丁标记）：编译器会标记动态节点的类型。例如，一个节点只有class变化，Vue 就只对比class，而跳过style、children等属性的对比。这种“靶向治疗”极大减少了运行时的比对开销。
• Fragment 支持：Vue 3 允许组件返回多个根节点（Fragment），避免了额外的<div>包裹层，减少了 DOM 层级，让 Diff 树更扁平、更高效。

四、 总结：性能的艺术

Vue 3 的虚拟 DOM 并非简单的“JS 对象映射”，它是一套精密的差异计算与调度系统。

• 态度鲜明：不要迷信“虚拟 DOM 一定比直接操作 DOM 快”。在简单场景下，手动操作 DOM 可能更快。但在复杂应用、高频更新、大规模列表的场景下，Vue 3 通过双端比较 + LIS 算法 + 编译时优化构建的防御工事，能将性能损耗降至最低。
• 核心逻辑：避免不必要的创建/销毁，尽可能复用现有节点；利用 Key 精准定位，利用算法优化移动。

理解了这 100 行代码背后的逻辑，你就掌握了 Vue 3 性能优化的“金钥匙”。在实际开发中，永远给v-for加上唯一的key，避免不必要的响应式数据，就是对这套算法最大的尊重。