Vue和React有哪些区别


Posted in Javascript onSeptember 12, 2020

一、监听数据变化的实现原理不同

  • Vue通过 getter/setter以及一些函数的劫持,能精确知道数据变化 ,不需要特别的优化就能达到很好的性能
  • React默认是通过 比较引用 的方式进行的,如果不优化( pureComponent/shouldComponentUpdate )可能导致大量不必要的VDOM得重新渲染

为什么 React 不精确监听数据变化呢 ?这是因为 Vue 和 React 设计理念上的区别, Vue 使用的是可变数据,而React更强调数据的不可变。 所以应该说没有好坏之分,Vue更加简单,而React构建大型应用的时候更加鲁棒。

二、数据流的不同

Vue和React有哪些区别

  • 大家都知道Vue中默认是支持双向绑定的。在Vue1.0中我们可以实现两种双向绑定:
props
v-model
  • 在 Vue2.x 中去掉了第一种, 也就是父子组件之间不能双向绑定了(但是提供了一个语法糖自动帮你通过事件的方式修改),并且 Vue2.x 已经不鼓励组件对自己的 props 进行任何修改了 。
  • 然而 React从诞生之初就不支持双向绑定,React一直提倡的是单向数据流,他称之为 onChange/setState() 模式 。不过由于我们一般都会用 Vuex 以及 Redux 等单向数据流的状态管理框架,因此很多时候我们感受不到这一点的区别了。

三、HOC和mixins

在Vue中我们组合不同功能的方式是通过mixin,而在React中我们通过HOC(高阶组件)。React 最早也是使用 mixins 的,不过后来他们觉得这种方式对组件侵入太强会导致很多问题,就弃用了 mixinx 转而使用 HoC,关于mixin究竟哪里不好,可以参考React官方的这篇文章 Mixins Considered Harmful。而 Vue 一直是使用 mixin 来实现的。

但是为什么Vue不采用HOC的方式来实现呢?

因为 高阶组件本质就是高阶函数,React的组件是一个纯粹的函数,所以高阶函数对React来说非常简单 。但是Vue就不行了, Vue中组件是一个被包装的函数,并不简单的就是我们定义组件的时候传入的对象或者函数 。比如我们定义的模板怎么被编译的?比如声明的props怎么接收到的?这些都是vue创建组件实例的时候隐式干的事。由于vue默默帮我们做了这么多事,所以我们自己如果直接把组件的声明包装一下,返回一个高阶组件,那么这个被包装的组件就无法正常工作了。

四、组件通信的区别

Vue和React有哪些区别

在Vue 中有三种方式可以实现组件通信:

  • 父组件通过 props 向子组件传递数据或者回调,虽然可以传递回调,但是我们一般只传数据,而通过 事件的机制来处理子组件向父组件的通信
  • 子组件通过 事件 向父组件发送消息
  • 通过 V2.2.0 中新增的 provide/inject 来实现父组件向子组件注入数据,可以跨越多个层级。

在React中,也有对应的三种方式:

  • 父组件通过 props 可以向子组件传递数据或者回调
  • 可以通过 context 进行跨层级的通信 ,这其实和 provide/inject 起到的作用差不多。

可以看到, React 本身并不支持自定义事件 ,Vue中子组件向父组件传递消息有两种方式: 事件和回调函数,而且Vue更倾向于使用事件 。但是 在 React 中我们都是使用回调函数的 ,这可能是他们二者最大的区别。

五、渲染模版的不同

在表层上, 模板的语法不同

  • React是通过JSX渲染模版
  • 而Vue是通过一种拓展的HTML语法进行渲染

但其实这只是表面现象,毕竟 React并不必须依赖JSX 。在深层上,模板的原理不同,这才是他们的本质区别:

  • React是在组件JS代码中,通过 原生JS实现 模板中的常见语法,比如插值,条件,循环等,都是通过JS语法实现的
  • Vue是在和组件JS代码分离的单独的模板中, 通过指令来实现的 ,比如 条件语句就需要 v-if 来实现

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

六、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来比较的(如果看Vuex源码会知道,其实他内部直接创建一个Vue实例用来跟踪数据变化)

七、diff算法不同

两者流程思维上是类似的,都是基于两个假设(使得算法复杂度降为O(n)):

  • 不同的组件产生不同的 DOM 结构。当type不相同时,对应DOM操作就是直接销毁老的DOM,创建新的DOM。
  • 同一层次的一组子节点,可以通过唯一的 key 区分。

但两者源码实现上有区别:

  • Vue基于snabbdom库,它有较好的速度以及模块机制。 Vue Diff使用双向链表,边对比,边更新DOM 。
  • React主要使用 diff队列保存需要更新哪些DOM,得到patch树,再统一操作批量更新DOM。

Vue和React有哪些区别

八、事件机制不同

Vue

  • Vue原生事件使用 标准Web事件
  • Vue组件 自定义事件机制,是父子组件通信基础
  • Vue合理利用了snabbdom库的模块插件

React

  • React原生事件被包装,所有事件都冒泡到顶层document监听,然后在这里合成事件下发 。基于这套,可以跨端使用事件机制,而不是和Web DOM强绑定。
  • React组件上无事件,父子组件通信使用props

以上就是Vue和React有哪些区别的详细内容,更多关于Vue和React的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
利用JQuery动画制作滑动菜单项效果实现步骤及代码
Feb 07 Javascript
js实现拉伸拖动iframe的具体代码
Aug 03 Javascript
jquery实现按Enter键触发事件示例
Sep 10 Javascript
使用GruntJS构建Web程序之构建篇
Jun 04 Javascript
基于jquery实现的自动补全功能
Mar 12 Javascript
Node.js事件驱动
Jun 18 Javascript
精彩的Bootstrap案例分享 重点在注释!(选项卡、栅格布局)
Jul 01 Javascript
详解Angular开发中的登陆与身份验证
Jul 27 Javascript
canvas压缩图片转换成base64格式输出文件流
Mar 09 Javascript
在vue项目中正确使用iconfont的方法
Sep 28 Javascript
微信小程序iBeacon测距及稳定程序的实现解析
Jul 31 Javascript
vue中 v-for循环的用法详解
Feb 19 Javascript
浅谈vue项目利用Hbuilder打包成APP流程,以及遇到的坑
Sep 12 #Javascript
解决vue项目 build之后资源文件找不到的问题
Sep 12 #Javascript
vue项目打包为APP,静态资源正常显示,但API请求不到数据的操作
Sep 12 #Javascript
vue v-on:click传递动态参数的步骤
Sep 11 #Javascript
vue Cli 环境删除与重装教程 - 版本文档
Sep 11 #Javascript
在vue中使用cookie记住用户上次选择的实例(本次例子中为下拉框)
Sep 11 #Javascript
请求时token过期自动刷新token操作
Sep 11 #Javascript
You might like
php中比较简单的导入phpmyadmin生成的sql文件的方法
2011/06/28 PHP
php数字游戏 计算24算法
2012/06/10 PHP
CI框架常用方法小结
2016/05/17 PHP
PHP排序算法之归并排序(Merging Sort)实例详解
2018/04/21 PHP
PHP实现本地图片转base64格式并上传
2020/05/29 PHP
防止xss和sql注入:JS特殊字符过滤正则
2013/04/18 Javascript
Extjs表单常见验证小结
2014/03/07 Javascript
js鼠标点击图片切换效果代码分享
2015/08/26 Javascript
js文字横向滚动特效
2015/11/11 Javascript
41个Web开发者必须收藏的JavaScript实用技巧
2016/07/22 Javascript
JS锚点的设置与使用方法
2016/09/05 Javascript
jQuery EasyUI右键菜单实现关闭标签/选项卡
2016/10/10 Javascript
javascript加载xml 并解析各节点的值(实现方法)
2016/10/12 Javascript
vue的props实现子组件随父组件一起变化
2016/10/27 Javascript
js实现刷新页面后回到记录时滚动条的位置【两种方案可选】
2016/12/12 Javascript
jQuery EasyUI的TreeGrid查询功能实现方法
2017/08/08 jQuery
vue实现全选和反选功能
2017/08/31 Javascript
HTML5开发Kinect体感游戏的实例应用
2017/09/18 Javascript
js定义类的方法示例【ES5与ES6】
2019/07/30 Javascript
node 版本切换的实现
2020/02/02 Javascript
python安装oracle扩展及数据库连接方法
2017/02/21 Python
Python验证文件是否可读写代码分享
2017/12/11 Python
浅析PEP572: 海象运算符
2019/10/15 Python
使用python写一个自动浏览文章的脚本实例
2019/12/05 Python
Keras 快速解决OOM超内存的问题
2020/06/11 Python
matplotlib绘制鼠标的十字光标的实现(内置方式)
2021/01/06 Python
英国在线自行车店:Merlin Cycles
2018/08/20 全球购物
Molly Bracken法国电子商店:法国女性时尚品牌
2019/07/24 全球购物
学习雷锋活动总结
2014/04/29 职场文书
文明美德伴我成长演讲稿
2014/05/12 职场文书
本科毕业生应聘自荐信范文
2014/06/26 职场文书
最美家庭活动方案
2014/08/31 职场文书
授权委托书范本(单位)
2014/09/28 职场文书
MySQL中distinct与group by之间的性能进行比较
2021/05/26 MySQL
Python实现科学占卜 让视频自动打码
2022/04/09 Python
微软团队与 NASA 科学家和惠普企业(HPE)的工程师合作
2022/04/21 数码科技