共计 1020 个字符，预计需要花费 3 分钟才能阅读完成。
一，在 diff 算法上的异同
相同点：
1. 虚构 DOM 在比拟时只比拟同一层级节点，复杂度都为 O(n)，升高了算法复杂度。
2. 都应用 key 比拟是否是雷同节点，都是为了尽可能的复用节点。
3. 都是操作虚构 DOM，最小化操作实在 DOM，进步性能（其实虚构 DOM 的劣势 并不是在于它操作 DOM 快）。
4. 都是不要用 index 作为 key。
不同点：
1.diff 算法遍历节点方向：
React 的是 仅向右挪动 ，Vue2 的是 双端向两头挪动，Vue3 的是在 Vue2 的根底上减少最长递增子序列的算法优化。
2.diff 算法比拟变量：
vue 保护四个变量：
oldStartIdx => 旧头索引
oldEndIdx => 旧尾索引
newStartIdx => 新头索引
newEndIdx => 新尾索引
两边方向同时比拟，由新的地位来获取实在 DOM；如果老的先走完，就增加；如果新的先走完，就删除
react 保护三个变量：
1.nextIndex => 遍历 nextChildren 时候的 index，每遍历一个元素加 1（遍历新节点）2.lastPlacedIndex => 上一次从 prevChildren 中取出来元素时，这个元素在 prevChildren 中的 index（新节点对应）3.oldIndex => 元素在数组中的地位（旧节点对应的地位）节点挪动前提是：oldIndex < lastPlacedIndex
挪动的准则：
首个节点（指的是新节点）不执行挪动操作（除非它要被移除），以该节点为原点，其它节点都去寻找本人的新地位;
将原来的元素往右移，通过 lastIndex 来管制。在 lastIndex 右边的，就往 lastIndex 左边挪动；在 lastIndex 左边的，就不须要动。
nextIndex : 往右遍历，逐步 +1
oldIndex：依据 nextIndex 在旧结点中寻找对应的元素，如果能找到比拟 oldIndex 和 lastPlacedIndex，否则增加
lastPlacedIndex：能够了解为是一个比拟指引，当产生挪动的时候 lastPlacedIndex 值放弃上一次比拟值，不做挪动应用 oldIndex 值
oldIndex = 4 > lastPlacedIndex 不做操作，且 lastPlacedIndex = oldIndex = 4
oldIndex = 0 < lastPlacedIndex 挪动，lastPlacedIndex 放弃不变
3.diff 算法比对形式：
React 只比拟节点类型和 key，Vue 比拟节点类型和 key，还有属性