Vue和React的区别

1. 监听数据变化的实现原理不同
   Vue通过getter/setter以及一些函数的劫持能精确知道数据的变化
   React默认是通过比较引用方式(diff)进行的，若不优化会导致大量不必要的VDom(虚拟Dom)的重新渲染
2. 数据流不同
   Vue实现双向绑定：props可以双向绑定、组件与DOM之间可以通过v-model绑定
   React不支持双向绑定，提倡单向数据流,称之为onChange/setState模式
3. 组件通信的区别

• Vue中有三种方式可以实现组件通信：
  (1) 父组件通过props向子组件传递数据或者回调，虽然可以传递回调，但是我们一般只传数据；
  (2) 子组件通过事件向父组件发送消息；
  (3) 通过V2.2.0中新增的provide/inject来实现父组件向子组件注入数据，可以跨越多个层级。
• React中也有对应的三种方式：
  (1) 父组件通过props可以向子组件传递数据或者回调；
  (2) 可以通过 context进行跨层级的通信，这其实和 provide/inject 起到的作用差不多。
  (3) React 本身并不支持自定义事件，而Vue中子组件向父组件传递消息有两种方式：事件和回调函数，但Vue更倾向于使用事件。在React中我们都是使用回调函数的

4. 模板渲染方式的不同

• 在表层上，模板的语法不同，React是通过JSX渲染模板。而Vue是通过一种拓展的HTML语法进行渲染，但其实这只是表面现象，毕竟React并不必须依赖JSX。
• 在深层上，模板的原理不同，这才是他们的本质区别：React是在组件JS代码中，通过原生JS实现模板中的常见语法，比如插值，条件，循环等，都是通过JS语法实现的，更加纯粹更加原生。而Vue是在和组件JS代码分离的单独的模板中，通过指令来实现的，比如条件语句就需要 v-if 来实现对这一点，这样的做法显得有些独特，会把HTML弄得很乱。

5. 渲染过程不同

• Vue可以更快地计算出Virtual DOM的差异，这是由于它在渲染过程中，会跟踪每一个组件的依赖关系， 不需要重新渲染整个组件树。
• React在应用的状态被改变时，全部子组件都会重新渲染。通过shouldComponentUpdate这个生命周期方法可以进行控制，但Vue将此视为默认的优化。
• 如果应用中交互复杂，需要处理大量的UI变化，那么使用Virtual DOM是一个好主意。如果更新元素并不频繁，那么Virtual DOM并不一定适用，性能很可能还不如直接操控DOM。

6. 框架本质不同
   Vue本质是MVVM框架，由MVC发展而来
   React是前端组件框架，是由后端组件演化而来