Vue--diff的原理

柔光的暖阳◎ 2023-10-01 15:42 11阅读 0赞

原文网址：[Vue--diff的原理\_IT利刃出鞘的博客-CSDN博客][Vue--diff_IT_-CSDN]

## 简介 ##

**说明**

本文介绍vue的diff的原理。

vue的diff原理是基于虚拟DOM的。虚拟DOM的详解见：[Vue--虚拟DOM(virtual DOM)--详解\_IT利刃出鞘的博客-CSDN博客][Vue--_DOM_virtual DOM_--_IT_-CSDN]

## diff原理简介 ##

**初始渲染**

第一次渲染页面时，按此流程进行：模板=> 渲染函数=> 虚拟DOM=> 真实DOM

虚拟DOM是用JS对象来表示的，里边的每一个节点可以称为虚拟节点：Vnode。虚拟DOM可以理解为一个树状结构的对象。

**页面改动**

虚拟DOM状态变更的时候，重新构造一棵新的对象树，然后用新的树和旧的树进行比较(diff)，记录两棵树差异。

把所记录的差异应用到真正的DOM树上(patch)，视图就更新了。

## diff原理详解 ##

**diff的两个特点**

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

**流程详述**

采用深度优先遍历，把树形结构按照层级分解，只比较同级元素;当数据发生改变时，set方法会让调用Dep.notify通知所有订阅者Watcher，订阅者就会调用patch给真实的DOM打补丁(两个重要函数patchVnode和updateChildren)。

1.  判断根结点及变化后的节点是否是sameVnode。
    
    1.  如果不是的话，就会创建新的根结点并进行替换
    2.  如果是sameVnode，则进入patchVnode函数。
2.  patchVnode函数
    
    1.  如果两个节点是相等oldVnode === vnode则直接return
    2.  如果新节点是文本节点，则判断新旧文本节点是否一致，不一致(oldVnode.text !== vnode.text)则替换
    3.  如果新节点不是文本节点，则开始比较新旧节点的子节点oldCh和ch：
    4.  如果子节点都存在，则进行updateChildren计算（稍后讲）
    5.  如果只有新子节点存在,则如果旧节点有文本节点，则移除文本节点，然后将新子节点拆入
    6.  如果只有旧子节点存在，则移除所有子节点
    7.  如果均无子节点且旧节点是文本节点，则移除文本节点（此时新节点一定不是文本节点）
3.  updateChildren函数（做细致对比）
    
    1.  start && oldStart对比
    2.  end && oldEnd对比
    3.  start && oldEnd对比
    4.  end && oldStart 对比
    5.  生成map映射，（key:旧子节点上的key，value:旧子节点在自己点中的位置）,根据key记录下老节点的位置（idxInOld）
    6.  如果找到了idxInOld,如果是相同节点则移动旧节点到新的对应的地方，否则虽然key相同但元素不同，当作新元素节点去创建
    7.  如果没有找到idxInOld，则创建节点
    8.  如果老节点先遍历完，则新节点比老节点多,将新节点多余的插入进去
    9.  如果新节点先遍历完，则就节点比新节点多,将旧节点多余的删除

## diff中key的作用 ##

diff算法比较后，会出现3种情况：

1.  如果新虚拟DOM找到了与旧虚拟DOM相同的key，但新旧虚拟DOM内容没有变，新的虚拟DOM就不用创建真实DOM，直接复用之前旧虚拟DOM创建的真实DOM。
2.  如果新虚拟DOM找到了与旧虚拟DOM相同的key，但新旧虚拟DOM内容变了，则生成新的真实DOM，随后替换掉页面中之前的真实DOM
3.  如果新虚拟DOM中未找到与旧虚拟DOM相同的key，则创建新的真实DOM，随后渲染到页面

最后总结，key正是diff算法的关键，通过这个key可以作为桥梁，连接起新旧两个虚拟DOM。

## diff原理示意图 ##

新旧节点的比较方法如下：

1.  先找到不需要移动的相同节点，消耗最小
2.  再找相同但是需要移动的节点，消耗第二小
3.  最后找不到，才会去新建删除节点，保底处理

比如下图存在这两棵 需要比较的新旧节点树 和 一棵 需要修改的页面 DOM树

![69af5b7bde77dfe2f9e49ca309b722e6.png][]

**第一轮比较**

因为父节点都是 1，所以开始比较他们的子节点。按照我们上面的比较逻辑，所以先找 相同 && 不需移动 的点。

毫无疑问，找到 2。

![667f6ac8f2ce3ea382db4b186ec3a596.png][]

拿到比较结果，这里不用修改DOM，所以 DOM 保留在原地。

![43073d63216d25fc453a6953f454e51d.png][]

**第二轮比较开始**

此时没有 相同 && 不需移动 的节点 了。只能第二个方案：找相同的点。

找到 节点5，相同但是位置不同，所以需要移动。

![8f49d13939de4b82786f9dd378471474.png][]

拿到比较结果，页面 DOM 树需要移动DOM 了，不修改，原样移动

![bea415123b67fad0786298adbdbda92e.png][]

**第三轮比较开始**

此时相同节点也没得了，只能创建了。要根据 新Vnode 中没找到的节点去创建并且插入。

然后旧Vnode 中有些节点不存在 新VNode 中，所以要删除。

![55b6e91107d50d3132e36a35f24e6ac4.png][]

于是开始创建节点 6 和 9，并且删除节点 3 和 4

![f711678af6ac0bae2c46106a9198318e.png][]

[Vue--diff_IT_-CSDN]: https://knife.blog.csdn.net/article/details/122591120
[Vue--_DOM_virtual DOM_--_IT_-CSDN]: https://knife.blog.csdn.net/article/details/122592178
[69af5b7bde77dfe2f9e49ca309b722e6.png]: https://img-blog.csdnimg.cn/img_convert/69af5b7bde77dfe2f9e49ca309b722e6.png
[667f6ac8f2ce3ea382db4b186ec3a596.png]: https://img-blog.csdnimg.cn/img_convert/667f6ac8f2ce3ea382db4b186ec3a596.png
[43073d63216d25fc453a6953f454e51d.png]: https://img-blog.csdnimg.cn/img_convert/43073d63216d25fc453a6953f454e51d.png
[8f49d13939de4b82786f9dd378471474.png]: https://img-blog.csdnimg.cn/img_convert/8f49d13939de4b82786f9dd378471474.png
[bea415123b67fad0786298adbdbda92e.png]: https://img-blog.csdnimg.cn/img_convert/bea415123b67fad0786298adbdbda92e.png
[55b6e91107d50d3132e36a35f24e6ac4.png]: https://img-blog.csdnimg.cn/img_convert/55b6e91107d50d3132e36a35f24e6ac4.png
[f711678af6ac0bae2c46106a9198318e.png]: https://img-blog.csdnimg.cn/img_convert/f711678af6ac0bae2c46106a9198318e.png