React,Vue2和Vue3在原理等内容上的异同

一，在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 : 往右遍历，逐渐+1oldIndex：根据nextIndex在旧结点中寻找对应的元素，如果能找到比较oldIndex和lastPlacedIndex，否则添加lastPlacedIndex：可以理解为是一个比较指引，当发生移动的时候lastPlacedIndex值保持上一次比较值，不做移动使用oldIndex值oldIndex = 4 > lastPlacedIndex 不做操作，且 lastPlacedIndex = oldIndex = 4oldIndex = 0 < lastPlacedIndex 移动， lastPlacedIndex保持不变

3.diff算法比对方式：React只比较节点类型和key，Vue比较节点类型和key，还有属性