Vue与React两个框架的粗略区别对比

29次阅读

共计 2306 个字符,预计需要花费 6 分钟才能阅读完成。

简单介绍
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

正文完
 0