Vue与React的区别和优势对⽐
简单介绍
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被直接注⼊到了组件实例中，因此可以⽐较灵活的使⽤：使⽤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实现快速渲染
轻量级
jquery是什么功能组件响应式组件
服务器端渲染
易于集成路由⼯具，打包⼯具以及状态管理⼯具
优秀的⽀持和社区
以上就是Vue与React的区别和优势对⽐的详细内容，更多关于Vue与React的资料请关注其它相关⽂章！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。