简略介绍

React--Facebook创立的JavaScript UI框架。它撑持着包含Instagram在内的大多数Facebook网站。React与过后风行的jQuery,Backbone.js和Angular 1等框架不同，它的诞生扭转了JavaScript的世界。其中最大的变动是React推广了Virtual DOM（虚构DOM）并发明了新的语法——JSX，JSX容许开发者在JavaScript中书写HTML（译者注：即HTML in JavaScript）。

Vue致力解决的问题与React统一，但却提供了另外一套解决方案。Vue应用模板零碎（弱化的jsx），使其对现有利用的降级更加容易。这是因为模板用的就是一般的HTML，通过Vue来整合现有的零碎是比拟容易的，不须要整体重构。同时Vue的学习曲线绝对react来说更加容易。

相似之处

React与Vue有很多相似之处，如他们都是JavaScript的UI框架，专一于发明前端的富利用。不同于晚期的JavaScript框架“功能齐全”，Reat与Vue只有框架的骨架，其余的性能如路由、状态治理等是框架拆散的组件。

  • 两者都是用于创立UI的JavaScript库；
  • 两者都疾速轻便；
  • 都有基于组件的架构；
  • 都是用虚构DOM；
  • 都可放入单个HTML文件中，或者成为更简单webpack设置中的模块；
  • 都有独立但罕用的路由器和状态治理库；

它们之间的最大区别是Vue通常应用HTML模板文件，而React则齐全是JavaScript。Vue有双向绑定语法糖。

不同点

1.监听数据变动的实现原理不同

Vue通过 getter/setter以及一些函数的劫持，能准确晓得数据变动。

React默认是通过比拟援用的形式（diff）进行的，如果不优化可能导致大量不必要的VDOM的从新渲染。为什么React不准确监听数据变动呢？这是因为Vue和React设计理念上的区别，Vue应用的是可变数据，而React更强调数据的不可变，两者没有好坏之分，Vue更加简略，而React构建大型利用的时候更加鲁棒。

2.数据流的不同


Vue1.0中能够实现两种双向绑定：父子组件之间，props能够双向绑定；组件与DOM之间能够通过v-model双向绑定。Vue2.x中去掉了第一种，也就是父子组件之间不能双向绑定了（然而提供了一个语法糖主动帮你通过事件的形式批改），并且Vue2.x曾经不激励组件对本人的 props进行任何批改了。

React始终不反对双向绑定，提倡的是单向数据流，称之为onChange/setState()模式。不过因为咱们个别都会用Vuex以及Redux等单向数据流的状态治理框架。

3.HoC和mixins

Vue组合不同性能的形式是通过mixin，Vue中组件是一个被包装的函数，并不简略的就是咱们定义组件的时候传入的对象或者函数。比方咱们定义的模板怎么被编译的？比方申明的props怎么接管到的？这些都是vue创立组件实例的时候隐式干的事。因为vue默默帮咱们做了这么多事，所以咱们本人如果间接把组件的申明包装一下，返回一个HoC，那么这个被包装的组件就无奈失常工作了。

React组合不同性能的形式是通过HoC(高阶组件）。React最早也是应用mixins的，不过起初他们感觉这种形式对组件侵入太强会导致很多问题，就弃用了mixinx转而应用HoC。高阶组件实质就是高阶函数，React的组件是一个纯正的函数，所以高阶函数对React来说非常简单。

4.组件通信的区别


Vue中有三种形式能够实现组件通信：父组件通过props向子组件传递数据或者回调，尽管能够传递回调，然而咱们个别只传数据；子组件通过事件向父组件发送音讯；通过V2.2.0中新增的provide/inject来实现父组件向子组件注入数据，能够逾越多个层级。

React中也有对应的三种形式：父组件通过props能够向子组件传递数据或者回调；能够通过 context 进行跨层级的通信，这其实和 provide/inject 起到的作用差不多。React 自身并不反对自定义事件，而Vue中子组件向父组件传递音讯有两种形式：事件和回调函数，但Vue更偏向于应用事件。在React中咱们都是应用回调函数的，这可能是他们二者最大的区别。

5.模板渲染形式的不同

在表层上，模板的语法不同，React是通过JSX渲染模板。而Vue是通过一种拓展的HTML语法进行渲染，但其实这只是表面现象，毕竟React并不必须依赖JSX。

在深层上，模板的原理不同，这才是他们的本质区别：React是在组件JS代码中，通过原生JS实现模板中的常见语法，比方插值，条件，循环等，都是通过JS语法实现的，更加纯正更加原生。而Vue是在和组件JS代码拆散的独自的模板中，通过指令来实现的，比方条件语句就须要 v-if 来实现对这一点，这样的做法显得有些独特，会把HTML弄得很乱。

6.渲染过程不同

Vue能够更快地计算出Virtual DOM的差别，这是因为它在渲染过程中，会跟踪每一个组件的依赖关系，不须要从新渲染整个组件树。

React在利用的状态被扭转时，全副子组件都会从新渲染。通过shouldComponentUpdate这个生命周期办法能够进行管制，但Vue将此视为默认的优化。

7.框架实质不同

Vue实质是MVVM框架，由MVC倒退而来；

React是前端组件化框架，由后端组件化发展而来。

8.Vuex和Redux的区别

从外表上来说，store注入和应用形式有一些区别。在Vuex中，$store被间接注入到了组件实例中，因而能够比拟灵便的应用：应用dispatch、commit提交更新，通过mapState或者间接通过this.$store来读取数据。在Redux中，咱们每一个组件都须要显示的用connect把须要的props和dispatch连接起来。另外，Vuex更加灵便一些，组件中既能够dispatch action，也能够commit updates，而Redux中只能进行dispatch，不能间接调用reducer进行批改。

从实现原理上来说，最大的区别是两点：Redux应用的是不可变数据，而Vuex的数据是可变的，因而，Redux每次都是用新state替换旧state，而Vuex是间接批改。Redux在检测数据变动的时候，是通过diff的形式比拟差别的，而Vuex其实和Vue的原理一样，是通过getter/setter来比拟的，这两点的区别，也是因为React和Vue的设计理念不同。React更偏差于构建稳固大型的利用，十分的科班化。相比之下，Vue更偏差于简略迅速的解决问题，更灵便，不那么严格遵循条条框框。因而也会给人一种大型项目用React，小型我的项目用Vue的感觉。

总结

Vue的劣势包含：

  • 模板和渲染函数的弹性抉择
  • 简略的语法及我的项目创立
  • 更快的渲染速度和更小的体积

React的劣势包含：

  • 更实用于大型利用和更好的可测试性
  • 同时实用于Web端和原生App
  • 更大的生态圈带来的更多反对和工具

而实际上，React和Vue都是十分优良的框架，它们之间的相似之处多过不同之处，并且它们大部分最棒的性能是相通的：

  • 利用虚构DOM实现疾速渲染
  • 轻量级
  • 响应式组件
  • 服务器端渲染
  • 易于集成路由工具，打包工具以及状态管理工具
  • 优良的反对和社区