Vue2的diff算法到底咋工作？从原理到实践一次讲透

terry 9小时前阅读数 6 #Vue

文章标签 Vue2；diff算法

想搞懂Vue2里页面更新为啥能又快又准？diff算法绝对是幕后大功臣！它就像Vue更新DOM时的“智能侦察兵”，能精准定位该改的地方，少做很多无用功，但diff到底咋运作？不同场景下咋对比节点？为啥写列表必须加key？今天咱从原理到实践，把Vue2 diff算法拆得明明白白～

先搞懂：diff算法解决啥问题？

首先得唠唠虚拟DOM,真实DOM操作特别“贵”——每次增删改都要触发浏览器重排/重绘，频繁操作容易卡，而虚拟DOM是用JS对象来描述真实DOM的结构，比如一个<div class="box">Hello</div>，对应的虚拟DOM可能长这样：{ tag: 'div', props: { class: 'box' }, children: 'Hello' }。

当数据变化时,Vue会生成新的虚拟DOM树，然后和旧的虚拟DOM树对比，找出“哪些节点变了、怎么变的”，最后只把这些变化同步到真实DOM上，这个“找差异”的过程，就是diff算法干的活！它的核心目标很简单：用最少的DOM操作完成更新，毕竟直接操作真实DOM太耗性能啦。

Vue2 diff的核心思路：同层对比+双端遍历

为啥只做“同层对比”？

真实DOM是树形结构,要是跨层对比（比如把父节点和孙子节点比），算法复杂度会飙到O(n³)（n是节点数），这在前端性能里完全没法接受，而Vue2选择“同层对比”——只对比当前层级的节点，不同层级的直接销毁重建，这样复杂度直接降到O(n)，效率飞起！

举个栗子：如果父节点从<div>变成<span>，那Vue直接把旧<div>对应的整个子树全删了，重新建<span>的子树；但如果父节点没变，才会去对比它的子节点，所以开发时要尽量避免父节点标签名频繁变化，否则子节点全得重建，性能血崩～

双端遍历咋操作？

Vue2的diff用了“双指针”的技巧，给旧节点数组和新节点数组各配两个指针：旧头（oldStart）、旧尾（oldEnd），新头（newStart）、新尾（newEnd），对比时会按这4种顺序狂戳：

① 新头 vs 旧头：如果节点相同，更新内容，两个头指针都后移一位；
② 新尾 vs 旧尾：如果节点相同，更新内容，两个尾指针都前移一位；
③ 新头 vs 旧尾：如果节点相同，把旧尾对应的真实DOM“挪”到新头位置，然后新头后移、旧尾前移；
④ 新尾 vs 旧头：如果节点相同，把旧头对应的真实DOM“挪”到新尾位置，然后新尾前移、旧头后移；

要是这4种情况都没匹配上,就去“key的映射表”里找（所以列表必须加key！），找到对应的旧节点就移动/更新，找不到就新增节点，等某一边的指针“撞车”了（比如旧头＞旧尾，说明旧节点遍历完了），就把剩下的新节点批量插入，或者把剩下的旧节点批量删除。

这种双端遍历的好处是,处理“列表头尾增删、移动”这类场景时特别快，比如在列表最前面加个元素，新头和旧头一对比就匹配上了，直接更新，不用绕弯路～

节点对比时，“相同节点”咋判断？

diff过程中,判断两个节点是不是“同一个”，得看标签名+key！

标签名和key必须同时匹配

比如旧节点是<li key="1">，新节点也是<li key="1">，这才算同一个节点，只需要更新内容；但如果新节点key变成"2"，哪怕标签还是<li>，Vue也会把旧节点删掉，重新建个新的<li key="2">，这就是为啥列表渲染一定要加key，而且key得稳定、唯一！

踩过坑的同学都知道：用index当key有多坑！比如列表删第一项，index会从0,1,2…变成0,1…，导致所有节点的key都对应错了，diff时以为全变了，直接全删重建，性能暴跌，所以记住：用数据里的唯一标识（比如后台返回的id）当key才安全～

不同节点类型咋处理？

如果新旧节点标签名不一样（比如旧的是<div>，新的是<span>），Vue会直接把旧节点对应的真实DOM销毁，然后新建新节点的DOM，所以要是父节点标签名频繁切换，子节点全得跟着重建，这性能开销谁扛得住？开发时尽量用动态class、样式变化代替标签切换～

patch过程：找到差异后咋更新真实DOM？

diff只负责“找差异”，真正更新真实DOM的过程叫patch，不同类型的节点，patch逻辑也不一样：

① 文本节点：如果内容变了，直接改element.textContent；
② 元素节点：先对比属性（新增、修改、删除props），再对比子节点（递归走diff逻辑）；
③ 组件节点：触发组件的更新生命周期，重新渲染子组件；

这里得注意：Vue2的diff是同步对比差异，但更新真实DOM的操作会被放到nextTick里批量执行（避免频繁触发重排/重绘），所以你看到的“数据变了，页面延迟一点更新”，就是nextTick在搞鬼～

实际开发中，这些原理咋指导我们写代码？

列表渲染：key必须加，还得加对

再强调一次：v-for一定要绑key，而且得用数据里的唯一标识（比如item.id），别偷懒用index！举个反面教材：

<ul>
  <li v-for="(item, index) in list" :key="index">{{ item.name }}</li>
</ul>

如果list删了第一项，所有item的index都会变，Vue以为所有<li>都不一样了，直接全删重建，性能爆炸，换成:key="item.id"，diff时能精准匹配，只更改变动的部分，丝滑得很～

减少不必要的节点层级变化

比如有个组件,根标签在<div>和<span>之间切换，像这样：

<template>
  <component :is="tag">{{ content }}</component>
</template>
<script>
export default {
  data() { return { tag: 'div', content: 'Hello' } },
  methods: {
    switchTag() { this.tag = this.tag === 'div' ? 'span' : 'div' }
  }
}
</script>

每次切换tag，父节点标签名变了，子节点全得重建，不如改成用动态class控制样式，保持标签名不变：

<template>
  <div :class="{ isSpan: isSpan }">{{ content }}</div>
</template>
<script>
export default {
  data() { return { isSpan: false, content: 'Hello' } },
  methods: {
    switchStyle() { this.isSpan = !this.isSpan }
  }
}
</script>
<style>
.isSpan { display: inline; }
</style>

别搞跨层DOM操作，diff不认

Vue2的diff只对比同层节点,要是你手动把一个深层子节点“挪”到另一个父节点下，Vue根本检测不到这种跨层移动，只会销毁旧节点、重建新节点，所以复杂DOM结构调整，要么用Vue的过渡/动画方案，要么自己控制DOM（但不推荐，容易和Vue的响应式冲突）。

Vue2 diff和其他框架（比如React）的diff有啥不同？

React早期的diff是单端遍历（从头部开始逐一对比），处理头尾操作时没那么高效，而Vue2用双端遍历（两端对齐算法），在“列表头部新增、尾部删除、节点移动”这些场景下，能更快匹配到节点，减少DOM操作，不过React后来也做了很多优化，比如Fiber架构，但Vue2的双端对比在处理特定场景时，确实更“聪明”一点～

举个场景：列表最前面加个元素，Vue2的新头和旧头一对比，直接更新；React的单端遍历可能得往后找一圈，才发现是头部新增，效率稍慢，框架差异背后是设计理念不同，Vue更偏向“渐进式”，React更强调“声明式”，但diff的优化思路都是为了性能妥协～