---

React与Vue的相同点：

1. 都支持服务器渲染

2. 都数据驱动视图

• 在以前，我们需要频繁操作DOM实现页面效果。而Vue和React就隐藏了DOM的频繁操作，采用数据驱动视图的方式，只需要关注数据的变化。

3. 都遵循组件化的思想

• React和Vue都遵循组件化思想，它们把注意力放在UI层，将页面分成一一些细块，也就是组件，组件之间组合嵌套就形成最后的网页界面。

4. 都使用虚拟DOM

5. 都有状态管理

• react—redux
• vue—vuex

---

React与Vue框架的不同点

1. 框架本质不同

• Vue本质是MVVM框架，由MVC发展而来。
• React是前端组件框架，由后端组件演化而来。

2. 数据流不同

• Vue通过v-model实现组件与DOM之间数据双向绑定。
• React不支持数据双向绑定，提倡的是单向数据流(onChange/setState)
  

注：

• Vue1.0中可以实现两种双向绑定：父子组件之间，props可以双向绑定；组件与DOM之间可以通过v-model双向绑定。
• Vue2.x中去掉了第一种，也就是父子组件之间不能双向绑定了（但是提供了一个语法糖自动帮你通过事件的方式修改），并且Vue2.x已经不鼓励组件对自己的props进行任何修改了。

3. 监听数据变化的实现原理不同

• Vue通过getter，setter以及一些函数的劫持，能精确知道数据的变化。
• React是通过比较引用方式（diff）进行的，当应用的状态改变时，全部组件都会重新渲染。

4. 组件写法差异

• React推荐的做法是JSX + inline style, 也就是把 HTML 和 CSS 全都写进 JavaScript 中
• Vue 推荐的做法是 template 的单文件组件格式，即 html,css,JS 写在同一个文件(vue也支持JSX写法)

5. 渲染过程不同

• Vue可以更快地计算出Virtual DOM的差异，这是由于它在渲染过程中，会跟踪每一个组件的依赖关系，不需要重新渲染整个组件树。
• React在应用的状态被改变时，全部子组件都会重新渲染。通过shouldComponentUpdate这个生命周期方法可以进行控制。

6. 组件通信的不同

Vue中组件通信：

1. 父组件通过props向子组件传递数据或回调，子组件通过事件向父组件发送消息。
2. provide/inject来实现父组件向子组件注入数据，跨层级通信。

React中组件通信：

1. 父组件通过props向子组件传递数据或者回调
2. 通过context进行跨层级通信。

React 本身并不支持自定义事件，而Vue中子组件向父组件传递消息有两种方式：事件和回调函数，但Vue更倾向于使用事件。在React中我们都是使用回调函数的，这可能是他们二者最大的区别。