解析Vue 2.5的Diff算法

解析Vue 2.5的Diff算法完整攻略

简介

当我们在页面上创建或修改Vue实例时，Vue会把虚拟DOM和真实DOM作比较，来决定是否需要重新渲染页面。

Vue的Diff算法核心思想是该算法在一次比较中同层级只进行相同类型节点的比较。

Diff算法的具体实现

Vue的Diff算法是一个深度优先遍历的算法，当产生了更新时，它会比较新旧节点，并对差异进行打标记。在打标记结束后，Diff算法会遍历标记的差异列表，并将其应用于真实DOM树，完成一次更新。

Vue通过对比新旧节点判断它们是否相同（和层级没关系）。如果不相同，那么有可能是更新了一个旧节点，也有可能是新建了一个节点，或者删除了一个节点。

Vue在判断节点是否相同的时候，判断方法如下：

• 如果新旧节点的类型不同，直接认为两个节点是不同的并卸载旧节点，安装新节点
• 如果新旧节点的类型相同，则分别判断组成节点的属性、子节点的个数和文本内容

如果新旧节点的属性、子节点的个数和文本内容全部相同，则认为两个节点是相同的，不需要更新.

示例说明

示例1

对于以下两个节点，Diff算法会首先比较它们的类型，如果类型相同，再比较它们的属性、子节点以及文本信息。对于这两个节点来说，它们的类型相同，属性也相同，但是子节点的文本信息不同，所以需要更新。

旧节点：

<div>
  <p>旧的节点</p>
</div>

新节点：

<div>
  <p>新的节点</p>
</div>

被更新后的节点：

<div>
  <p>新的节点</p>
</div>

示例2

对于以下两个节点，Diff算法会首先比较它们的类型，如果类型相同，再比较它们的属性、子节点以及文本信息。对于这两个节点来说，它们的类型相同，属性也相同，子节点也一样，所以认为它们是相同的，不需要更新。

旧节点：

<div>
  <p>节点1</p>
  <span>节点2</span>
</div>

新节点：

<div>
  <p>节点1</p>
  <span>节点2</span>
</div>

被更新后的节点：

<div>
  <p>节点1</p>
  <span>节点2</span>
</div>

总结

Vue的Diff算法对比起其他框架的Diff算法并不算复杂，而且执行效率较高，表现很好。理解Vue的Diff算法的原理，对我们的前端开发具有重要意义，可以帮助我们更好地管理我们的组件。