vue和react的区别是什么?

作者 : 开心源码 本文共2651个字,预计阅读时间需要7分钟 发布时间: 2022-05-13 共146人阅读

vue和react的区别

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

一个人学习会有迷茫,动力不足。这里推荐一下我的前台学习交流qun:四八四,七五七,七六零,里面都是学习前台的,假如你想制作酷炫的网页,想学习编程。自己整理了一份2019最全面前台学习资料,从最基础的HTML+CSS+JS【炫酷特效,游戏,插件封装,设计模式】到手机端HTML5的项目实战的学习资料都有整理,送给每一位前台小伙伴,有想学习web前台的,或者是转行,或者是大学生,还有工作中想提升自己能力的,正在学习的小伙伴欢迎加入学习。

以上就是vue和react的区别是什么?的详细内容

说明
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是摆设,本站源码仅提供给会员学习使用!
7. 如遇到加密压缩包,请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » vue和react的区别是什么?

发表回复