美文网首页前端开发那些事让前端飞程序员
JavaScript 开发框架横向比对(Vue、React 和

JavaScript 开发框架横向比对(Vue、React 和

作者: deniro | 来源:发表于2018-05-30 11:38 被阅读132次

    1 背景比对

    比对 Vue React Angular
    出现年月 2013-7 2013-3 2010-1
    框架类型 MVVM MVC MVW
    开源许可 MIT license BSD3-license MIT license
    • MIT license 与 BSD-license 之间的区别是:MIT license 允许衍生软件加上我们自己的名字做推广,而 BSD license 不可以。
    • MVVM(Model-View-ViewModel):将其中的View 的状态和行为抽象化,分开了视图 UI 与业务逻辑。
    • MVW(Model-View-Whatever):不限控制层。

    Angular 出现最早,Vue 相对来说最新。

    2 开发比对

    比对 Vue React Angular
    开发与维护 尤雨溪(Google前员工) Facebook Google
    团队人数 16 未知 36
    Github star 95284 96651 58492
    Github 代码贡献者人数 190 1184 635
    日评星数(最近一年) 111.8 80.2 33.5

    Github star 与 Github 代码贡献者数字统计于 2018-5-25。

    最近一年,从 npm 服务器上的下载量趋势


    React 与 Vue 在标星数上差不多,而 React 代码社区最为活跃。

    3 流行度比对

    3.1 国内流行度

    我们在百度趋势中比较这三大框架。

    1、搜索指数

    搜索指数指的是关键词最近一个月的总体搜索指数表现。

    • 日均值:一段时间内搜索指数日均值。
    • 同比:与去年同期的同比变化率。
    • 环比:与上一个相邻时间段(即上一个7天/30天)的环比变化率。

    2、搜索指数趋势

    搜索指数趋势:互联网用户对键词搜索关注程度及持续变化情况。

    • 算法说明:以网民在百度的搜索量为数据基础,以关键词为统计对象,科学分析并计算出各个关键词在百度网页搜索中搜索频次的加权。

    3.2 国外流行度

    因为 Google 不可用(你懂的),所以我们通过其它知名的网站来做比较。

    3.2.1 stackoverflow

    Stack Overflow 是一个与程序相关的 IT 技术问答网站。该网站拥有 400 万用户,每月 5.6 亿的页面浏览量。

    我们对 Stack Overflow 2018 调查报告 进行分析。

    1、目前最流行的技术框架排名:


    image.png

    Angular 与 React 排名靠前,Vue 未上榜。

    2、目前大家最喜爱的技术框架排名:

    相对 Angular 来说,React 的表现很抢眼,Vue 未上榜。

    3.2.2 statejs

    statejs 网站使用了一套包含上百个问题的问卷调查,从超过 28000 名开发者中得出的 2017 年关于前端框架调查,结果 如下:

    很多开发者想学 Vue,而 React 拥有最多的开发者。


    国内流行 Vue,国外流行 React。

    4 技术比对

    比对 Vue React Angular
    基于组件 擅长 擅长 -
    依赖标准 ES5 或 ES6 ES6 TypeScript
    底层技术 单个文件(模板 + 脚本 +样式) JSX 模板
    数据绑定 单/双向绑定 单向绑定 双向绑定
    支持原生开发 支持(Weex ) 支持(react-native/react-native-renderer) 支持(NativeScript、Ionic)
    服务端预渲染 nuxt.js next.js Angular Universal
    学习曲线 简单 中等 陡峭

    1、基于组件:一个组件得到一个输入,并且在一些内部的行为/计算之后,它返回一个渲染的 UI 模板作为输出。定义的组件可以很容易在网页或其他组件中重用。

    2、 依赖标准:Vue 与 React 使用的都是 javaScript 语言标准,差别不大。Angular 是 javaScript 的超集,添加了可选的静态类型和基于类的面向对象编程;但与整个 JavaScript 语言相比,目前 TypeScript 的用户群仍然很小。

    3、底层技术

    • Vue 把模板,脚本和样式定义在一个文件中,这意味着可以获得语法高亮,CSS 支持以及更容易使用预处理器(如 Jade 或 SCSS)。
    • React 的 JSX 是一个类似 HTML 语法的可选预处理器,并可在 JavaScript 中进行编译。因为代码写在同一个地方,所以可以在代码完成和编译时更好地检查。如果在 JSX 中输入错误时,React 将无法通过编译,它会打印出错的位置。
    • Angular 2 在运行时会静默失败。它的模板使用特殊的 Angular 语法来增强 HTML。虽然 React 需要 JavaScript 的知识,但 Angular 需要学习 Angular 特有的语法。

    4、数据绑定

    当 UI 元素(例如,用户输入)被更新时,Angular 的双向绑定会改变 model 状态。Angular 的方式实现起来代码更干净,开发人员更容易实现。在 React 中实现该功能,必须先更新 model,然后渲染 UI 元素。React 的方式会有更好的数据总览,因为数据只能在一个方向上流动,这样更容易调试。

    5、性能比较与内存分配

    性能方面:


    内存方面:

    Vue 有着良好的性能和不错的内存分配技巧,但如果比较快慢的话,这些框架都非常接近。注意:性能基准只作参考,不是判断标准。

    6 服务端预渲染

    服务器端预渲染有助于提升性能,整体用户体验和 SEO。

    7 学习曲线

    Angular 的学习曲线陡峭。即使对 Javascript 有深入的了解,也需要了解框架的底层原理。

    React 可能需要针对第三方库进行大量重大决策,比如状态管理就有 16 种不同的 flux 包供选择。

    Vue 学习起来很容易。没有经验的 Javascript 开发者或者在过去几年中主要使用 jQuery 开发者,考虑使用 Vue。Vue 看起来更像是简单的 Javascript。


    总结

    Vue 优点:

    • 平缓的学习曲线。
    • 干净的代码。
    • 轻量级的框架。

    React 优点:

    • 灵活。
    • 拥有大型的技术生态系统。
    • 良好的组件化设计。

    Angular 优点:

    • 基于 TypeScript。
    • 面向对象编程。

    建议:

    1. 小型、业务简单的项目建议使用 Vue 框架。
    2. 大型、业务复杂的项目建议使用 React 框架。

    相关文章

      网友评论

      本文标题:JavaScript 开发框架横向比对(Vue、React 和

      本文链接:https://www.haomeiwen.com/subject/dpywjftx.html