前端框架中的Diff算法概述
前端框架中使用的diff算法是一种用于比较两个虚拟DOM树差异的算法。为了提高性能，在更新页面时，前端框架通常会先生成新的虚拟DOM树，然后使用diff算法对新旧虚拟DOM树进行比较，找出差异，并将这些差异应用到实际的DOM树上，从而更新页面。
diff算法的核心思想是尽量减少DOM操作次数，只对真正发生变化的部分进行更新，而不是整个DOM树进行全量替换。它通过深度优先遍历的方式比较新旧虚拟DOM树中的节点，找出同一层级上不同的节点，并记录下它们的差异。
细分的话，diff算法可以分为以下几个步骤：
- 对于两个节点的比较，如果发现它们不相同，则表示需要对该节点进行更新。
- 如果两个节点的类型不同，则直接替换该节点。
- 如果节点的类型相同，就会比较节点的属性，仅更新发生变化的属性。
- 对于子节点，也会进行递归比较，找出差异并进行更新。
在比较的过程中，diff算法会根据一些启发式策略来提高效率。其中一个策略是使用唯一标识符（key）来判断节点是否需要被移动或者重新排序，以减少不必要的DOM操作。
diff算法的核心是通过比较新旧虚拟DOM树之间的差异，并仅对发生变化的部分进行更新。这样就避免了对整个DOM树进行全量替换，从而提升了页面的更新性能。
vue和react框架的diff算法
React和Vue是两个目前最流行的前端框架，它们都采用了不同的diff算法来实现高效的虚拟DOM更新。
React的diff算法：
React使用了一种称为"Reconciliation"的diff算法。该算法基于以下几个假设：
- 假设不同类型的组件会产生不同的树形结构，并且它们的上下文也完全不同。因此，React会销毁旧的树，然后建立新的树。
- 假设对于同一类型的组件，可以通过props来判断是否需要重新渲染，即使其内部状态（state）发生了变化。
- 假设对于列表（数组）中的子元素，React会使用唯一的key来标识每个元素，以便更准确地判断元素的增加、删除和移动。
基于以上假设，React的diff算法可以简化为以下几个步骤：
- 对比两个节点的类型：如果节点类型不同，则直接替换该节点及其子树。如果节点类型相同，则进入下一步比较它们的属性。
- 比较节点的属性：更新发生变化的属性。
- 通过递归比较子节点：
- 遍历子节点列表，并使用唯一的key来标识每个子节点。
- 在遍历过程中，React会尝试复用已存在的节点：如果新旧子节点列表中存在相同的key，则会复用旧节点，并递归比较其属性和子节点。如果新旧子节点列表中不存在对应的key，则会创建新节点并插入到对应位置。
React的diff算法采用了先序深度优先遍历的方式进行节点比较。它通过使用标记（tag）来表示节点的操作类型，例如插入、更新、移动、删除等。这种方式能够在遍历过程中尽早发现差异，并通过最小的代价将差异应用到实际的DOM树上，从而实现页面的更新。
Vue的diff算法：
Vue采用了一种名为"Virtual DOM with Keyed Diff"的diff算法，与React的算法有些微的差异。
Vue的diff算法主要包括以下几个步骤：
- 对比新旧虚拟DOM的根节点：
- 若节点类型不同，直接替换整个DOM树。
- 若节点类型相同，则进入下一步。
- 逐层对比新旧虚拟DOM的子节点：
- 首先，按照子节点的key进行查找和匹配。
- 若key匹配成功，表明是同一个节点，比较其属性并递归地对比其子节点。
- 若未找到匹配的key，表示是新增的节点或被移除的节点，进行插入或删除操作。
在Vue的diff算法中，通过使用key来唯一标识每个子节点，以便更高效地判断节点的增删和移动。同时，Vue还采用了双端比较策略，即在确定了匹配节点后，同时从新旧虚拟DOM的开头和结尾进行对比，以提高性能。
需要注意的是，在Vue的diff算法中，相较于React的算法，更倾向于进行全量替换。也就是说，当节点类型相同但属性发生变化时，Vue会直接替换整个DOM节点，而不会去细粒度地更新节点的属性。这是因为Vue更注重响应式数据的变化，而不是手动操作所引起的变化。
总结：
React的diff算法采用的是"Reconciliation"算法，通过先序深度优先遍历的方式逐层对比和更新差异。
而Vue的diff算法采用的是"Virtual DOM with Keyed Diff"算法，通过使用key来唯一标识每个子节点，并采用双端比较策略来提高性能。
