Vue与React两个框架的区别对比
简单介绍
React--Facebook创建的JavaScript UI框架。它支撑着包括Instagram在内的大多数Facebook网站。React与当时流行的jQuery,Backbone.js和Angular 1等框架不同,它的诞生改变了JavaScript的世界。其中最大的变化是React推广了Virtual DOM(虚拟DOM)并创造了新的语法——JSX,JSX允许开发者在JavaScript中书写HTML(译者注:即HTML in JavaScript)。
Vue致力解决的问题与React一致,但却提供了另外一套解决方案。Vue使用模板系统(弱化的jsx),使其对现有应用的升级更加容易。这是因为模板用的就是普通的HTML,通过Vue来整合现有的系统是比较容易的,不需要整体重构。同时Vue的学习曲线相对react来说更加容易。
相似之处
React与Vue有很多相似之处,如他们都是JavaScript的UI框架,专注于创造前端的富应用。不同于早期的JavaScript框架“功能齐全”,Reat与Vue只有框架的骨架,其他的功能如路由、状态管理等是框架分离的组件。
- 两者都是用于创建UI的JavaScript库;
- 两者都快速轻便;
- 都有基于组件的架构;
- 都是用虚拟DOM;
- 都可放入单个HTML文件中,或者成为更复杂webpack设置中的模块;
- 都有独立但常用的路由器和状态管理库;
它们之间的最大区别是Vue通常使用HTML模板文件,而React则完全是JavaScript。Vue有双向绑定语法糖。
不同点
在Vue组件中,有几个观念和React相差比较大,我觉得主要有以下这几点:
Vue组件分为全局注册和局部注册,在react中都是通过import相应组件,然后模版中引用;
props是可以动态变化的,子组件也实时更新,在react中官方建议props要像纯函数那样,输入输出一致对应,而且不太建议通过props来更改视图;
子组件一般要显示地调用props选项来声明它期待获得的数据。而在react中不必需,另两者都有props校验机制;
每个Vue实例都实现了事件接口,方便父子组件通信,小型项目中不需要引入状态管理机制,而react必需自己实现;
使用插槽分发内容,使得可以混合父组件的内容与子组件自己的模板;
多了指令系统,让模版可以实现更丰富的功能,而React只能使用JSX语法;
Vue增加的语法糖computed和watch,而在React中需要自己写一套逻辑来实现;
react的思路是all in js,通过js来生成html,所以设计了jsx,还有通过js来操作css,社区的styled-component、jss等;而 vue是把html,css,js组合到一起,用各自的处理方式,vue有单文件组件,可以把html、css、js写到一个文件中,html提供了模板引擎来处理。
react做的事情很少,很多都交给社区去做,vue很多东西都是内置的,写起来确实方便一些, 比如 redux的combineReducer就对应vuex的modules, 比如reselect就对应vuex的getter和vue组件的computed, vuex的mutation是直接改变的原始数据,而redux的reducer是返回一个全新的state,所以redux结合immutable来优化性能,vue不需要。
react是整体的思路的就是函数式,所以推崇纯组件,数据不可变,单向数据流,当然需要双向的地方也可以做到,比如结合redux-form,组件的横向拆分一般是通过高阶组件。而vue是数据可变的,双向绑定,声明式的写法,vue组件的横向拆分很多情况下用mixin。
社区活跃度
从两者的github表现上来看
可以看出vue的star数量已经是前端框架中最火爆的。从维护上来看,react是facebook在维护,而vue现阶段虽然也有了团队,但主要还是尤雨溪在维护贡献代码,并且阿里巴巴开源的混合式框架weex也是基于vue的,所以我们相信vue未来将会得到更多的人和团队维护。根据不完全统计,包括饿了么、简书、高德、稀土掘金、苏宁易购、美团、天猫、荔枝FM、房多多、Laravel、htmlBurger等国内外知名大公司都在使用vue进行新项目的开发和旧项目的前端重构工作。
使用vue的公司
根据不完全统计,包括饿了么、苏宁易购、美团、天猫、Laravel、htmlBurger等国内外知名大公司都在使用vue进行新项目的开发和旧项目的前端重构工作。
使用react的公司
UI生态
react有material-design,蚂蚁金服的ant-design等,vue有饿了么出品的element以及iview等。
总结
Vue的优势包括:
- 模板和渲染函数的弹性选择
- 简单的语法及项目创建
- 更快的渲染速度和更小的体积
React的优势包括:
- 更适用于大型应用和更好的可测试性
- 同时适用于Web端和原生App
- 更大的生态圈带来的更多支持和工具
而实际上,React和Vue都是非常优秀的框架,它们之间的相似之处多过不同之处,并且它们大部分最棒的功能是相通的:
- 利用虚拟DOM实现快速渲染
- 轻量级
- 响应式组件
- 服务器端渲染
- 易于集成路由工具,打包工具以及状态管理工具
- 优秀的支持和社区
总结比较速览

参考文档
- Vue与React两个框架的区别和优势对比http://caibaojian.com/vue-vs-react.html
- Vue.js与React的全面对比 https://blog.csdn.net/CystalVon/article/details/78428036
Vue与React两个框架的区别对比的更多相关文章
- Vue与REACT两个框架的区别和优势对比
VUE和REACT两个JavaScript框架都是当下比较受欢迎的,他们两者之间的区别有那些,各自的优缺点是什么,本文将为你呈现. 简单介绍 除非你最近一直不关注前端的发展,不然你肯定听说过由Face ...
- 前端UI框架选择区别对比推荐
UI选择务必慎重,货比三家. 弱水三千只取一瓢:弱水三千只取一瓢,源起佛经中的一则故事,警醒人们在一生中可能会遇到很多美好的东西,但只要用心好好把握住其中的一样就足够了 老牌构建于jQuery框架之上 ...
- vue 和 react 学习 异同点
vue 和 react 学习 异同点 本文不做两个框架比较,只对比了两个框架的语法对比,不代表任何观点,盗版必究,本人唯一qq:421217189 欢迎大家一起来学习探讨,壮我大前端(本文markdo ...
- vue与react对比总结(一)
一.react和vue设计上的共同理念 1.使用 Virtual DOM 2.提供了响应式 (Reactive) 和组件化 (Composable) 的视图组件. 3.将注意力集中保持在核心库,而将其 ...
- 前端两大框架 vue 和 react 的区别
1. 设计思想 vue: vue的官网介绍说vue是一种渐进式框架,采用自底向上增量开发的设计: react: 采用函数式编程,推崇纯组件,数据不可变,单向数据流: 2. 编写语法 vue: 采用单文 ...
- 前端框架 vue 和 react 的区别
前言:最近需要使用 react,以前用过 vue,故来总结两者的区别. 首先React与vue有几点相同之处 1.都使用了Virtual DOM 2.提供了响应式(Reactive)和组件化(Comp ...
- 一次掌握 React 与 React Native 两个框架
此系列文章将整合我的 React 视频教程与 React Native 书籍中的精华部分,给大家介绍 React 与 React Native 结合学习的方法. 1. 软件开发语言与框架的学习本质 我 ...
- 前端-关于 Vue 和 React 区别的一些笔记
监听数据变化的实现原理不同 1.Vue 通过 getter/setter 以及一些函数的劫持,能精确知道数据变化,不需要特别的优化就能达到很好的性能 2.React 默认是通过比较引用的方式进行的,如 ...
- vue、React Nactive的区别(转载)
Vue与React的对比 Vue.js与React.js从某些反面来说很相似,通过两个框架的学习,有时候对一些用法会有一点思考,为加深学习的思索,特翻阅了两个文档,从以下各方面进行了对比,加深了对这两 ...
随机推荐
- 【RecyclerView优化】
1.局部刷新 (1)避免整个列表的数据更新,只更新受影响的布局.例如,加载更多时,不使用notifyDataSetChanged(),而是使用notifyItemRangeInserted(range ...
- Python3|ddt|unittest|浅议数据驱动测试
目录 1.DDT简介 2.data装饰器 3.unpack装饰器 4.file_data装饰器 5.总结 1.DDT简介 Data-Driven Tests(DDT)即数据驱动测试.它允许您通过不同的 ...
- 关于Vue.use()使用详解
问题 相信很多人在用Vue使用别人的组件时,会用到 Vue.use() .例如:Vue.use(VueRouter).Vue.use(MintUI).但是用 axios时,就不需要用 Vue.use( ...
- Java实现文本编辑时基于拼音输入的补全原型
续前文Java实现"命令式"简易文本编辑器原型. 效果如下: 所在源码库同上文, 尚未和上文的编辑器右侧的命令区集成. 代码由How to show autocomplete as ...
- Win10系统修改主机名、用户名称和密码、以及C盘中的用户文件夹名
写在前面 近期重新安装了Ubuntu16.04系统,同时也修改了Windows10系统的用户名.密码,还有C盘用户文件夹名称.对于Linux和windows系统来说,修改名称基本都是三部分,主机名.用 ...
- windows根据端口号杀进程
有时候eclipse会被卡死, 结束进程后重新启动项目会出现端口已经被占用 这时候需要杀掉进程 1, cmd打开dos窗口 2, netstat -ano | findstr "端口号&qu ...
- XMPP协议之消息回执解决方案
苦恼中寻找方法 在开始做即时通信时就知道了消息回执这个概念,目的是解决通讯消息因为各种原因未送达对方而提供的一种保障机制.产生这个问题的原因主要是网络不稳定.服务器或者客户端一些异常导致没有接收到消息 ...
- 从壹开始微服务 [ DDD ] 之三 ║ 简单说说:领域、子域、限界上下文
前言 哈喽大家好,DDD领域驱动设计系列又开始了,前天周二的那篇入门文章中,也收到了一定的效果(写小说的除外),同时我也是倍感鸭梨,怎么说呢,DDD领域驱动设计已经有十年历史了,甚至更久,但是包括我在 ...
- mysql的学习笔记(三)
1.外键约束(保持数据一致,完整.实现一对多或一对一) 父表(参照的表)和子表(有外键列的表)必须使用相同的存储引擎InnoDB,禁止使用临时表. 外键列和参照列必须具有相似的数据类型.其中数字的长度 ...
- Linux 中查看进程及资源使用情况
top 自带的 top 命令类似于平时我们使用的任务管理器,能够列出当前系统中的进程及资源的使用情况. $ man top top - display Linux tasks 使用起来很简单,不加任何 ...