Vue和React的比较

谁能大致说下vue和react的最大区别之处？ - 知乎首先找到 Vue 和 React 的共性，它们被用于解决什么问题， 然后再挖掘各自独特的个性、设计原理以及未来…https://www.zhihu.com/question/309891718/answer/2282544794

 

共同点

Vue和React存在着很多的共同点：

-数据驱动视图

-组件化

-都使用 Virtual DOM

 

不同点

Vue和React两者虽然都是用于构建用户界面的框架，但是也有很大的差异，首先二者核心的思想就不同。

1、核心思想（特性）

Vue的定位是渐进式框架，灵活易用。利用对数据的劫持/代理，做到了响应数据的变化的快速和精确、灵敏。同时v-model这样的双向绑定的语法糖，也是非常的人性化。

React一开始就是要颠覆传统，推崇函数式编程，单向数据流的特性，需要双向的地方使用 onchange 和 setState 手动的去实现。

2、组件写法

Vue的单文件组件，基于模板+JS+css的模式，来组织代码，与传统的web开发习惯，更加契合；

React 则是 用JSX的方式来组织代码，所谓的 ALL IN JS ,一切都是 JS来控制，体验很大不一样

3、diff算法不同

Vue的Diff算法核心实现 

 -旧children和新children各有两个头尾的变量StartIdx和EndIdx，它们的2个变量相互比较，一共有4种比较方式。

-如果4种比较都没匹配，如果设置了key，就会用key进行比较，在比较的过程中，变量会往中间靠，一旦StartIdx>EndIdx表明旧children和新children至少有一个已经遍历完了，就会结束比较。

Vue2的核心Diff算法采用了双端比较的算法，同时从新旧children的两端开始进行比较，借助key值找到可复用的节点，再进行相关操作。相比React的Diff算法，同样情况下可以减少移动节点次数，减少不必要的性能损耗，更加的优雅。

React算法核心

react依次对新集合进行遍历，for( name in nextChildren)。

通过唯一key来判断老集合中是否存在相同的节点。如果没有的话创建，如果有，则继续比较两个节点的位置index，进行移动操作。

如果节点在老集合中有，新集合中没有，那就删除掉。