• React和Vue区别 2019-06-26 15:04:35
    1.监听数据变化的实现原理不同 Vue通过getter/setter以及一些函数的劫持,能精确...这是因为Vue和React设计理念上的区别,Vue使用的是可变数据,而React更强调数据的不可变,两者没有好坏之分,Vue更加简单,而Rea...

    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弄得很乱。

    举个例子,说明React的好处:react中render函数是支持闭包特性的,所以我们import的组件在render中可以直接调用。但是在Vue中,由于模板中使用的数据都必须挂在 this 上进行一次中转,所以我们import 一个组件完了之后,还需要在 components 中再声明下,这样显然是很奇怪但又不得不这样的做法。

    6.渲染过程不同

    Vue可以更快地计算出Virtual DOM的差异,这是由于它在渲染过程中,会跟踪每一个组件的依赖关系,不需要重新渲染整个组件树。

    React在应用的状态被改变时,全部子组件都会重新渲染。通过shouldComponentUpdate这个生命周期方法可以进行控制,但Vue将此视为默认的优化。

    如果应用中交互复杂,需要处理大量的UI变化,那么使用Virtual DOM是一个好主意。如果更新元素并不频繁,那么Virtual DOM并不一定适用,性能很可能还不如直接操控DOM。

    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的感觉。

     

    参考:https://www.jianshu.com/p/eb06903c8bf7

    展开全文
  • 关于react和vue的对比已经很久了,本人一直是react的重度使用者,为了对比vue和react的使用感受,特意了解相关知识,并且搭建了一些简单的demo以做对比,最终整理成文。 至于angular和vue还有react的对比,这里暂时...
  • React 中运行 Vue react-vue 2018-07-26 13:18:50
    React-Vue旨在连接 React Vue,帮助您在 React 中运行 Vue。 用途: 使用Vue 的 Reactivity 系统来观察React组件 使用 react-vue-loader 以在React应用中运行Vue组件 Reactivity 系统 感谢 Vue 层次...
  • React和Vue及AngularJS三者区别 目录 React和Vue及AngularJS三者区别 React和Vue的相同点 Reactvue区别一:Dom-UI更新 1.监听数据变化的实现原理不同 2.数据流的不同 3.HoCmixins 4.组件通信的区别 5....
  • React VS Vue 用户量 2019-06-17 19:26:57
    大家都知道React和Vue一直在被开发者对比较量 ,前段时间在知乎上吵的很热,于是大神出来进行了回答:https://www.zhihu.com/question/301860721/answer/545031906...在React和Vue性能差不多的原则下,我开始在乎...
  • BootStrap, React, Vue比较 2018-05-07 11:36:43
    转载: http://blog.51cto.com/12444007/1967291目前, 个人了解的前端比较流行的框架是三个: BootStrap, React, Vue想要为公司选一个作为接下来的前端技术研发方向, 因此作了一番调查, 有点浅见.BootStrap: 特点是...
  • vue和react的区别 2019-05-06 19:24:05
    前段时间刚从携程离职,中间面试了几家公司,因为本人 用过 backbone,underscore,jquery,vue,react 所以总有人问...2- vue react 都有自己的生态圈(全家桶)。 vue 全家桶 Vue有著名的全家桶系列: vue-router(h...
  • ReactVue的区别与联系原理 通常解答: Vue是采用指令结合vue-loader实现构建用户界面的渐进式框架,React是采用jsx构建用户界面的组件...Vue React 都使用虚拟DOM来实现,并且两者工作一样好; 相同点: 都...
  • reactvue比较一直是一个比较引战与容易引起争议的话题,或许每个前端都或多或少的参与到过这场辩论中,但是在这场巨大的辩论中产出的有价值的内容却一直比较稀缺。在这里我无意再次引起争吵,只是结合我自己的...
  • Vue和React大比拼 2018-07-24 14:39:06
    上个月,Vue 在 GitHub 上的 star...对此,小编搜集了一些资料,对 React Vue 进行全方位的比较,看哪个框架更适合用在新的基础架构中,也希望给大家一些启发。 React vs Vue 下文将在学习曲线、代码风格、单个...
  • 2016年React巩固了它作为前端框架之王的地位,这一年中可以看到它在Web端移动端的快速成长,同时稳稳领先于它的主要竞争对手Angular。 但是2016对Vue来说也是同样令人印象深刻的一年,它发布了Vue 2.0版本并且在...
  • VueReact的对比学习 - 01 2019-07-08 09:29:36
    React & Vue 技术分享 ​ 本次不是一门课程学习,仅仅只是个人对于两大框架...React和Vue不同之处相同之处 React和Vue生命周期对比 React和Vue实际代码中的区别 1. React和Vue不同之处相同之处 相同之处...
  • Reactvue的生命周期对照 2018-07-11 15:53:29
    第二阶段:组件更新阶段第三阶段:组件卸载阶段Vue独有的:以上是在学vue过程中为了更好的理解,对照react的生命周期,个人觉得vue和react有非常多相似的地方,只是在学习的过程中,感觉生命周期语法一类的,没有...
  • vue和react 相似区别 2018-08-13 18:36:26
    vue和react的区别 相似之处 他们都是JavaScript的UI框架,专注于创造前端的富应用 不同于早期的JavaScript框架“功能齐全”,Reat与Vue只有框架的骨架,其他的功能如路由、状态管理等是框架分离的组件。 Vue.js...
  • VueReact和Angular比较 2019-03-25 16:03:23
    VueReact和Angular区别 vue.js更轻量,压缩后大小只有20K+, 但React压缩后大小为44k,Angular压缩后大小有56k,所以对于移动端来说,vue.js更适合; vue.js更易上手,学习曲线平稳,而Angular入门较难,概念较多...
  • React Vue 中尝鲜 Hooks 2018-11-01 22:17:23
    在美国当地时间 10 月 26 日举办的 React Conf ...在 React Vue 中尝鲜 Hooks 而就在同月 28 日左右,作为 “摸着鹰酱过河” 优秀而典型代表的 Vue.js 社区,其创始人 Evan You 就在自己的 github 上发布了 vu...
  • 前端这几年的技术发展...2.开发框架,如Angular,React,Vue.js,Angular2等; 3.开发工具的丰富前端工程化,像Grunt,Gulp,Webpack,npm,eslint,mocha这些技术; 4.前端开发范围的扩展,如服务端的nodejs,exp
  •  如果你喜欢简单“能用就行”的东西,请使用Vue  如果你的应用需要尽可能的小快,请使用Vue  如果你计划构建一个大型应用程序,请使用React  如果你想要一个同时适用于Web端原生Ap
  • React还是Vue 2018-04-24 16:56:31
    原文链接:React or Vue: Which Javascript UI Library Should You Be Using? | Codementor 作者:Anthony Gore 译者:sunny 转载需提前联系译者,未经允许不得转载。 本文首发于前端指南 2016年,React...
  • 2016年React巩固了它作为前端框架之王的地位,这一年中可以看到它在Web端移动端的快速成长,同时稳稳领先于它的主要竞争对手Angular。 但是2016对Vue来说也是同样令人印象深刻的一年,它发布了Vue 2.0...
1 2 3 4 5 ... 20
收藏数 54,090
精华内容 21,636