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 相关文章推荐
关于Blog顶部的滚动导航条代码
Sep 25 Javascript
js制作的鼠标悬浮时产生的下拉框效果
Oct 27 Javascript
window.location 对象所包含的属性
Oct 10 Javascript
javascript实现仿IE顶部的可关闭警告条
May 05 Javascript
javascript字符串函数汇总
Dec 06 Javascript
JS基础随笔(菜鸟必看篇)
Jul 13 Javascript
JS中绑定事件顺序(事件冒泡与事件捕获区别)
Jan 24 Javascript
Angular 2.0+ 的数据绑定的实现示例
Aug 09 Javascript
es6中比较有用的7个技巧小结
Jul 12 Javascript
taro小程序添加骨架屏的实现代码
Nov 15 Javascript
js实现AI五子棋人机大战
May 28 Javascript
Node.js 中如何收集和解析命令行参数
Jan 08 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 json 格式控制
2015/12/24 PHP
PHP 接入支付宝即时到账功能
2016/09/18 PHP
php执行多个存储过程的方法【基于thinkPHP】
2016/11/08 PHP
jQuery控制输入框只能输入数值的小例子
2013/03/20 Javascript
javascript制作的滑动图片菜单
2015/05/15 Javascript
jQuery实现商品活动倒计时
2015/10/16 Javascript
JavaScript基本语法学习教程
2016/01/14 Javascript
基于BootStrap Metronic开发框架经验小结【七】数据的导入、导出及附件的查看处理
2016/05/12 Javascript
微信小程序 参数传递实例代码
2017/03/20 Javascript
深入理解 JavaScript 中的 JSON
2017/04/06 Javascript
详解Vue中状态管理Vuex
2017/05/11 Javascript
JavaScript异步上传图片文件的实例代码
2017/07/04 Javascript
Nodejs中的JWT和Session的使用
2018/08/21 NodeJs
vue组件表单数据回显验证及提交的实例代码
2018/08/30 Javascript
JavaScript实现与使用发布/订阅模式详解
2019/01/19 Javascript
vue 导航内容设置选中状态样式的例子
2019/11/01 Javascript
基于leaflet.js实现修改地图主题样式的流程分析
2020/05/15 Javascript
Python linecache.getline()读取文件中特定一行的脚本
2008/09/06 Python
Python中运行并行任务技巧
2015/02/26 Python
python操作ie登陆土豆网的方法
2015/05/09 Python
python爬虫入门教程--利用requests构建知乎API(三)
2017/05/25 Python
Python实现批量修改图片格式和大小的方法【opencv库与PIL库】
2018/12/03 Python
python的schedule定时任务模块二次封装方法
2019/02/19 Python
pandas删除行删除列增加行增加列的实现
2019/07/06 Python
django 做 migrate 时 表已存在的处理方法
2019/08/31 Python
python与mysql数据库交互的实现
2020/01/06 Python
python GUI库图形界面开发之PyQt5滑块条控件QSlider详细使用方法与实例
2020/02/28 Python
python简单实现最大似然估计&scipy库的使用详解
2020/04/15 Python
初中生操行评语大全
2014/04/24 职场文书
正科级干部考察材料
2014/05/29 职场文书
会计系毕业求职信
2014/08/07 职场文书
党员弘扬焦裕禄精神思想汇报
2014/09/10 职场文书
培训心得体会怎么写
2016/01/25 职场文书
JavaScript事件的委托(代理)的用法示例详解
2022/02/18 Javascript
Python函数对象与闭包函数
2022/04/13 Python
解决spring.thymeleaf.cache=false不起作用的问题
2022/06/10 Java/Android