前端开发：关于diff算法详解

前言

前端开发中，关于JS原生的内容和前端算法相关的内容一直都是前端工作中的核心，不管是在实际的前端业务开发还是前端求职面试，都是非常重要且必备的内容。那么本篇博文来分享一个关于前端开发中必备内容：diff算法，diff算法在前端实战中和前端求职面试中都是必备知识，整理总结一下，方便查阅使用。

diff算法是什么？

diff算法其实就是用于比较新旧虚拟DOM节点的差异性的算法。众所周知，每一个虚拟DOM节点都会有一个唯一标识，即Key，diff算法把树形结构按照层级分解，只比较同级元素，不同层级的节点只有创建和删除操作，通过对比新旧节点的Key来判断当前节点是否改变，把两个节点不同的地方存储在patch对象中，然后利用patch记录的消息进行局部更新DOM操作。

注意：若输入的新节点不是虚拟DOM , 那么需要将DOM节点转换为虚拟DOM才行，也就是说diff算法是针对虚拟DOM的。

patch()函数

patch函数其实就是用于节点上树，更新DOM的函数，也就是将新旧节点进行比较的函数。

diff算法的诞生

想必大家都知道，前端领域中在之前传统的DOM操作非常昂贵，数据的改变往往需要更新 DOM 树上的多个节点，可谓是牵一发而动全身，所以虚拟DOM和Diff算法的诞生就是为了解决上述问题。

前端的Web界面由 DOM 树来构成，当某一部分发生变化的时候，其实就是对应的某个 DOM 节点发生了变化。在 Vue中，构建 UI 界面的思路是由当前状态决定界面，前后两个状态就对应两套界面，然后由 Vue来比较两个界面的