Vue和React区别

核心思想不同

Vue是一个灵活易用的渐进式双向绑定的MVVM框架，核心思想是尽可能的降低前端开发的门槛。

React是一个构建用户界面的JavaScript库，核心思想是声明式渲染、组件化和单向数据流。React既不属于MVC也不属于MVVM架构。

React单向数据流

数据主要从父节点通过props传递给子节点，如果顶层的props改变，就会重新渲染所有子节点。但是单向数据流并非单向绑定，如果想要从一个组件改变另一个组件的状态，可以通过状态提升，将状态提升到最近的祖先组件中，触发父组件的状态变更，从而影响另一个组件。单向数据流的好处是保证状态改变的可追溯性。

组件写法不同

Vue是template+js+css的单文件组件格式。

React是JSX+inline style，把html和css全部写进JS中。

diff算法不同

vue和react的diff算法都是进行同层次的比较，主要有以下两点不同：

• vue对比节点，如果节点元素类型相同，但是className不同，认为是不同类型的元素，会进行删除重建，但是react则会认为是同类型的节点，只会修改节点属性。
• vue的列表比对采用的是首尾指针法，而react采用的是从左到右依次比对的方式，当一个集合只是把最后一个节点移动到了第一个，react会把前面的节点依次移动，而vue只会把最后一个节点移动到最后一个，从这点上来说vue的对比方式更加高效。

响应式原理不同

React主要是通过setState()方法来更新状态，状态更新之后，组件也会重新渲染。

Vue是通过数据劫持+发布-订阅模式实现双向绑定。

封装程度不同

vue封装程度更高，内置多个指令和数据双向绑定，react封装度比较低，适合扩展。