热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

前端框架:react还是vue?

之前写了一篇前端框架的大汇总,主要介绍了当下主流的框架和其特性。最近除了bootstrap,就属react和vue最为热门,这篇就主要拿这两个框架来做一下详细对比。究竟如何正确使用?作为小白的我们从

 

之前写了一篇前端框架的大汇总,主要介绍了当下主流的框架和其特性。最近除了bootstrap,就属react和vue最为热门,这篇就主要拿这两个框架来做一下详细对比。

究竟如何正确使用?作为小白的我们从何学起比较好?带着一系列问题来看看吧。

这篇主要介绍:

1、从出身背景、优势、缺点、适合场景、开发模式、实践情况进行对比

2、相似之处

3、如何选择?

 


 

 

从出身背景、优势、缺点、适合场景、开发模式、实践情况进行对比

1、出身背景:

 

react是facebook团队开发,2013.3月发布。目前版本15.5.4(初始版本是13开头),社区较成熟,拥有更大的生态圈

 

vue是Evan You个人开发,2014年2月发布 vue2.0版本,生态圈较小

 

 

2、优势:

 

react官网推荐的三个特点如下:

 

  • 状态机 —轻松创建交互界面
  • 基于组件 —封装组件,管理状态
  • 学习一次,到处使用 —跨平台
  • 更大的规模、更多的使用者、更好的可测试性
  • Web和原生APP
  • 能提供更多支持和工具的更大的生态系统

vue 官网推荐的三个特点

  • 易用 —会html、css、js即刻开始使用
  • 灵活 —渐进式技术栈
  • 性能 —17kb (min+gzip),渲染速度更快,体积更小
  • 模板或渲染的灵活选项
  • 语法以及项目设置的简单

 

3、缺点:

react:

  • 需要转换开发模式(函数式编程)
  • 学习新的概念和语法(jsx、es5/6等)
  • 需要其他类库支持 (redux)

vue:

  • 个人维护框架,风险可能会更大
  • 社区不成熟,部分依赖开发人员更新
  • 资源较少

 

4、适合场景

react:

  • 大型复杂应用程序 
  • 同时适用于web端和原生APP
  • 周期长,不断迭代的需求

vue:

  • 模板搭建开发模式
  • 周期短、小型应用程序

 

5、开发模式

react:

  • 函数式编程(JSX)
  • setState状态管理

vue:

  • 模板式开发
  • 属性对象

 

6、实践情况

react:

  • 国外公司:Facebook、Netflix、Airbnb
  • 国内公司:蚂蚁金服、阿里、口碑、美团、滴滴

vue:

  • 主要是饿了么

 


 

 

相似之处

React和Vue都是优秀的UI库,并且具有更多的相似之处。它们都有的优势是:

  • 使用虚拟DOM快速渲染
  • 轻量级
  • 响应式组件
  • 服务端渲染
  • 轻松集成的的路由、捆绑和状态管理
  • 强大的支持和社区

 


 

如何选择?

如果是以下需求选react

1、如果想组件式开发

2、如果想web和wap统一技术栈

3、如果想要代码更可维护和可测试性

4、如果你想要最大的生态系统,想利用丰富的组件库及第三方包

5、如果你想要构建大型应用程序

 

如果是以下需求选vue

1、如果你喜欢使用模板( 或需要一些其中的选项)构建应用程序

2、如果是在现有代码基础上快速升级

3、如果你喜欢简单的能正常工作的,想更加灵活性

4、如果你希望你的程序更小更快,想要更快的渲染速度和体积

 


 

 

最后

作为刚入门的小白, 可以先学Vue,然后再在vue的基础上学习React。所以下次就说说Vue吧~


推荐阅读
  • Python 数据可视化实战指南
    本文详细介绍如何使用 Python 进行数据可视化,涵盖从环境搭建到具体实例的全过程。 ... [详细]
  • Webpack 初探:Import 和 Require 的使用
    本文介绍了 Webpack 中 Import 和 Require 的基本概念和使用方法,帮助读者更好地理解和应用模块化开发。 ... [详细]
  • Web开发框架概览:Java与JavaScript技术及框架综述
    Web开发涉及服务器端和客户端的协同工作。在服务器端,Java是一种优秀的编程语言,适用于构建各种功能模块,如通过Servlet实现特定服务。客户端则主要依赖HTML进行内容展示,同时借助JavaScript增强交互性和动态效果。此外,现代Web开发还广泛使用各种框架和库,如Spring Boot、React和Vue.js,以提高开发效率和应用性能。 ... [详细]
  • 如何撰写初级和高级前端开发者的专业简历
    如何撰写初级和高级前端开发者的专业简历 ... [详细]
  • 如何撰写PHP电商项目的实战经验? ... [详细]
  • 本文详细介绍了Java代码分层的基本概念和常见分层模式,特别是MVC模式。同时探讨了不同项目需求下的分层策略,帮助读者更好地理解和应用Java分层思想。 ... [详细]
  • Framework7:构建跨平台移动应用的高效框架
    Framework7 是一个开源免费的框架,适用于开发混合移动应用(原生与HTML混合)或iOS&Android风格的Web应用。此外,它还可以作为原型开发工具,帮助开发者快速创建应用原型。 ... [详细]
  • 解决Bootstrap DataTable Ajax请求重复问题
    在最近的一个项目中,我们使用了JQuery DataTable进行数据展示,虽然使用起来非常方便,但在测试过程中发现了一个问题:当查询条件改变时,有时查询结果的数据不正确。通过FireBug调试发现,点击搜索按钮时,会发送两次Ajax请求,一次是原条件的请求,一次是新条件的请求。 ... [详细]
  • 为了确保iOS应用能够安全地访问网站数据,本文介绍了如何在Nginx服务器上轻松配置CertBot以实现SSL证书的自动化管理。通过这一过程,可以确保应用始终使用HTTPS协议,从而提升数据传输的安全性和可靠性。文章详细阐述了配置步骤和常见问题的解决方法,帮助读者快速上手并成功部署SSL证书。 ... [详细]
  • 在不使用Webpack和单文件组件的情况下,构建Vue组件系统的可行性探讨 ... [详细]
  • 为开发者提供了一系列实用的参考网站和资源链接,包括HTML速查手册( 和 ),帮助开发者快速查找和学习相关技术知识。此外,还涵盖了其他重要的开发工具和文档,为编程工作提供全面支持。 ... [详细]
  • 作为软件工程专业的学生,我深知课堂上教师讲解速度之快,很多时候需要课后自行消化和巩固。因此,撰写这篇Java Web开发入门教程,旨在帮助初学者更好地理解和掌握基础知识。通过详细记录学习过程,希望能为更多像我一样在基础方面还有待提升的学员提供有益的参考。 ... [详细]
  • Vue应用预渲染技术详解与实践 ... [详细]
  • 深入解析:React与Webpack配置进阶指南(第二部分)
    在本篇进阶指南的第二部分中,我们将继续探讨 React 与 Webpack 的高级配置技巧。通过实际案例,我们将展示如何使用 React 和 Webpack 构建一个简单的 Todo 应用程序,具体包括 `TodoApp.js` 文件中的代码实现,如导入 React 和自定义组件 `TodoList`。此外,我们还将深入讲解 Webpack 配置文件的优化方法,以提升开发效率和应用性能。 ... [详细]
  • 本文详细介绍了在 Vue.js 前端框架中集成 vue-i18n 插件以实现多语言支持的方法。通过具体的配置步骤和示例代码,帮助开发者快速掌握如何在项目中实现国际化功能,提升用户体验。同时,文章还探讨了常见的多语言切换问题及解决方案,为开发人员提供了实用的参考。 ... [详细]
author-avatar
手机用户2502860901
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有