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

一，在响应式原理上的异同

Vue2是使用Object.defineProperty的get与set来实现响应式的，数组对象则通过劫持原型的方法加上get与set来实现。
Vue3的ref是使用Object.defineProperty的get与set来实现响应式的（数据劫持），reactive是通过使用Proxy的get,set与deleteProperty来实现响应式的，并通过Reflect操作源对象内部的数据。
1.ref用来定义基本类型数据。
2.reactive用来定义对象或者数组类型数据。
3.ref也可以用来定义对象或者数组类型数据，它内部会通过reactive转为代理对象。

二，在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，还有属性