探索Vue.js底层源码——Diff算法思想简单梳理

简介

    Diff无疑是Vue.js底层的核心思想之一，它优化了传统的DOM更新渲染的方式，在很大程度上提高页面更新时DOM渲染的性能。它基于虚拟DOM，通过比较新、旧虚拟DOM的区别，来对真实DOM进行打补丁（patch）或DOM位置变换的操作，从而避免了重复创建一样的DOM或重新创建所有DOM的情况。

算法思想描述

    在Diff算法中，DOM节点的比较是同一级DOM节点树之间的比较。首先，它会判断这两个新旧虚拟DOM是否属于同一个引用，是则不进行后续比较，不是则对比每一级的节点。并且，需要注意的是它的每一级比较不是仅仅的从上到下，它是基于指针的移动来对新旧虚拟DOM进行比较，即进入比较时，会定义四个指针分别指向新旧虚拟DOM的首尾DOM，通过循环条件（只要头指针小于尾指针则），分别对新旧虚拟DOM首位两个进行对比（即会进行4次首位比较），匹配成功则将旧虚拟DOM的当前匹配成功的DOM移动到对应新虚拟节点DOM匹配成功的位置（即，避免了DOM重复创建，只需移动位置）。如果都匹配不成功，则将新虚拟DOM中的DOM节点插入到旧虚拟DOM的对应位置中（即，只创建旧虚拟DOM中没有的DOM节点），从而完成整个比较过程。

---

    图解：

最后附上几篇参考的前辈讲的Diff，从中收益匪浅，值得一看：
https://www.cnblogs.com/wind-lanyan/p/9061684.html
https://www.jianshu.com/p/4f67c3f216a0