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 相关文章推荐
非常不错的一个javascript 类
Nov 07 Javascript
Dom加载让图片加载完再执行的脚本代码
May 15 Javascript
使用jquery插件实现图片延迟加载技术详细说明
Mar 12 Javascript
js动态给table添加/删除tr的方法
Aug 02 Javascript
new Date()问题在ie8下面的处理方法
Jul 31 Javascript
javascript实现类似超链接的效果
Dec 26 Javascript
Node.js刷新session过期时间的实现方法推荐
May 18 Javascript
谈谈JavaScript数组常用方法总结
Jan 24 Javascript
利用Js+Css实现折纸动态导航效果实例源码
Jan 25 Javascript
原生JS实现跑马灯效果
Feb 20 Javascript
简单实现JS上传图片预览功能
Apr 14 Javascript
webpack4与babel配合使es6代码可运行于低版本浏览器的方法
Oct 12 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
?生?D片??C字串
2006/12/06 PHP
php使用pack处理二进制文件的方法
2014/07/03 PHP
php检测url是否存在的方法
2015/04/14 PHP
php数组随机排序实现方法
2015/06/13 PHP
一个简单的JavaScript数据缓存系统实现代码
2010/10/24 Javascript
jquery实现移动端点击图片查看大图特效
2020/09/11 Javascript
JavaScript控制浏览器全屏及各种浏览器全屏模式的方法、属性和事件
2015/12/20 Javascript
jQuery ajax请求返回list数据动态生成input标签,并把list数据赋值到input标签
2016/03/29 Javascript
jQuery的内容过滤选择器学习教程
2016/04/18 Javascript
Node.js中防止错误导致的进程阻塞的方法
2016/08/11 Javascript
js中获取 table节点各tr及td的内容简单实例
2016/10/14 Javascript
jquery中用函数来设置css样式
2016/12/22 Javascript
浅谈Angular路由复用策略
2017/10/04 Javascript
在vue中实现简单页面逆传值的方法
2017/11/27 Javascript
Array数组对象中的forEach、map、filter及reduce详析
2018/08/02 Javascript
微信小程序-可移动菜单的实现过程详解
2019/06/24 Javascript
Vue的状态管理vuex使用方法详解
2020/02/05 Javascript
vue在线动态切换主题色方案
2020/03/26 Javascript
在vue中使用回调函数,this调用无效的解决
2020/08/11 Javascript
vue-cli4.0多环境配置变量与模式详解
2020/12/30 Vue.js
[04:28]DOTA2亚洲邀请赛小组赛第五日 TOP10精彩集锦
2015/02/03 DOTA
python paramiko实现ssh远程访问的方法
2013/12/03 Python
跟老齐学Python之模块的加载
2014/10/24 Python
Python简单检测文本类型的2种方法【基于文件头及cchardet库】
2016/09/18 Python
Django代码性能优化与Pycharm Profile使用详解
2018/08/26 Python
简单易懂Pytorch实战实例VGG深度网络
2019/08/27 Python
opencv3/C++实现视频读取、视频写入
2019/12/11 Python
Python提取视频中图片的示例(按帧、按秒)
2020/10/22 Python
Python中的流程控制详解
2021/02/18 Python
H5仿微信界面教程(一)
2017/07/05 HTML / CSS
FORZIERI澳大利亚站:全球顶级奢华配饰精品店
2016/12/31 全球购物
Goodee官方商店:迷你投影仪
2021/03/15 全球购物
竞选班干部演讲稿100字
2014/08/20 职场文书
机械专业毕业生自我鉴定2014
2014/10/04 职场文书
安全教育培训制度
2015/08/06 职场文书
一篇文章带你搞懂Python类的相关知识
2021/05/20 Python