前端三大主流框架的区别(三)

article/2025/9/14 4:12:34

前面两篇已经做了细致的分析,这一篇就总结总结三大主流框架吧

1.angular

在这里插入图片描述

1.1. 简介:

angular是最早出现的框架,
angularjs是通过directive(指令)去封装组件,react和vue是通过component。 

1.2. 优点:

1、背后靠山(google),有着稳定的维护团队。且google的Adwords业务就使用了angular,作为一个赚钱的业务,google也会让它的环境更稳定一些。
2、angular+typescript,google和微软的双剑合璧。angular全面支持typescript语法,typescript不仅包含es6中的语法,也包括一些新的语法,
最重要的一点是它增加了类型规则,这让代码的可读性和可维护性大大的提高,它也可以让有java或.net背景的开发人员更快的掌握。
3、完整。其实相对react和vue来说,angular更可以说是一个框架,而react和vue本身只能算是一个库。angular自带了几乎所有页面应具有的功能,路由、表单、ajax、模版、双向数据绑定等等。它原生的form表单模块非常强大,除了双向绑定的基本功能,还自带验证等,开发人员不需要再去为了这些功能找第三方库,angular一个框架就包含了这些的所有,因此对于选择困难症人群,这是一个优点。
4、每个框架都有自己的cli脚手架,可以快速搭建项目雏形。angular-cli自带国际化。
5、它的每一个组件都是一个文件夹,html、js、和css文件是分开的,让代码更加清晰
而且它的各类型文件单独存在,在开发中使用任何IDE都可以检查代码。可以使用自带的格式化功能,让开发过程中的代码更整洁

1.3. 缺点:

1、难调试,angular的代码整洁、规范,很容易维护和审查,但是它的控制台报错信息太差了,大部分情况是无法看出问题到底在哪,这就在开发过程中给调试增加了很大的难度。而react和vue在开发中会更加明确的让开发人员了解到错误出在哪里。
2、太重了,它自带了很多模块,这解决了开发人员在选择上耗费的时间,压缩后达到了168k,是vue50k的三倍还多,即使在4版本中,拆分了一些功能,但是它依然还是很重
3、学习成本,angular它有超多的概念,有一些单单通过文档还很难于理解,还有不友好的api文档。因为它的东西太多,所以api文档内容也很多,增大了阅读难度。这就导致了刚接触angular的人很难上手。也给心理上造成了很大的压力,那文档一看就不想看了,还有api,它是英文的。

2.React

在这里插入图片描述

2.1. 简介:

react本身不能算作一个框架,因为它本身的功能有限,不过它有一个庞大的生态系统,全世界无数开发人员在为它提供开源包,
也许对于开发人员一个很难完成的问题已经有其他人员帮你完成了,只需要引入就好了。 

2.2. 优点:

1、后台(facebook)
2、轻量,体积小本来应该是算在react和vue的优点中,但是在一个大型的项目中,就比如一般的react要用的是 react+redux+react-router或许还要加上发送请求的axios,如果有一些其他的需求还要再加包,vue也同样,vue+vuex+vue-router+vue-axios,这就导致react和vue体积小的优点在逐步减小。所以这一方面我们应该说react和vue的 可组装性 是强于angular的,更加灵活,想用什么用什么。
3、react的单项数据流机制,这相对angular的双向数据流来说,因为单向,所以它的各种变化都是可预计的,不像双向数据流,一旦数据流复杂起来,大家都互相触发变化,开发人员根本猜不出你改变一个地方会在另外什么地方跟着变。
4、react-native,一个优秀的移动端开发框架,使用react特有的jsx语法,可以让开发人员像写pc端页面那样去写移动端,它自动适配了不同的移动端的屏幕分辨率。jsx语法是将html融入到js中。
5、state,所有的数据都储存在state中,只可以使用setState方法去改变。开发人员可以把所有的数据都存放在state中,让所有组件都去这里边取数据,当然如果组件过多的话会让顶级组件的state过重,这时可以将公用的放在顶级state中,各自私用的存放在自身的state中。这样在开发和维护的过程中只需要关注各个state就好。

2.3. 缺点:

1、react的灵活性就导致了在选择上要耗费成本,确定使用框架的人要去考量这个项目有哪些功能,要用到哪些包还要去看哪些包的质量要高一些,因为相同的功能也会有很多开源人员贡献包。这些工作耗费的时间成本也是一个项目不得不考虑的问题。这一问题在vue上也同样存在
2、react的jsx语法,它学习起来并不是很难,应该是比ts要简单一些。但是它的写法是把html和js结合起来,这就导致在一些IDE上,你没法对它格式化,如果格式化的话,它会将html像js语法那种格式排列。代码的可读性要差一些。而且在js中写html时就要避免两者出现相同的关键字,比如class,在jsx中就要写成className,还要是驼峰式写法
3、使用redux,redux在处理数据流的时候是使用saga语法,开发人员要去学习saga的写法,然后saga的异步操作和同步操作是分开在两个函数中写,要在组件本身写一次,数据流到父组件时还要再写一遍,写法上要更复杂,如果想简化它,就要用一个前端应用框架-DVA,就还是通过加东西来增加开发效率。
4、virtual DOM,vue会跟踪每一个组件的依赖关系,不需要重新渲染整个组件树.而对于React而言,每当应用的状态被改变时,全部组件都会重新渲染,所以react中会需要shouldComponentUpdate这个生命周期函数方法来进行控制

3.Vue

在这里插入图片描述

3.1. 简介:

vue的一个特点是每一个.vue文件都是一个组件,在这一个vue文件中包括style、scripts、template三个标签来包含css、js和html。
它是最后一个出现的框架,所以在它的实现中,它取其他两个框架之长,去其他两个框架之短,借鉴了许多好的设计理念,
比如angular的指令、双向绑定,react的component思想。 

3.2. 优点:

1、国产框架,所以它对国内开发者在学习它时要更友好。所以它的学习成本是三个框架中最低的。中文的api文档,我觉得单这一点,就让国内的开发者在学习vue时能够节省超多的精力。
2、vuex,完成了redux的功能且在写法上更加便捷,不再需要dva这种框架去帮他简便写法。
3、vue的体积是三个框架中最小的,加上它的处理机制,在非大型项目的对比中,它的性能是最高的。vue在非大型项目上,有了react和angular的优点,且更简单,更易上手。
4、vue会跟踪每一个组件的依赖关系,不需要重新渲染整个组件树
5、vue实现了数据的双向绑定,react数据流动是单向的

3.3. 缺点:

1、vue的响应系统无法检测属性的添加和删除,以及某些数组的修改,开发人员有时会忽略这一点。
2、它毕竟发展的时间没有它们长,生态环境要更小,有时在开发中出现了问题,无法在网络上寻求到有效的帮助

4.综合

4.1. 效率:

angular、react和vue都是mvvm模式,(model,view,view-model),angular的数据绑定、操作dom就是通过viewmodel完成的。react和vue的view-model的高效率通过框架自身提供的virtual dom(虚拟dom)来实现,它是一个js对象,我们数据的变化会被映射到这个虚拟dom上,然后虚拟dom再去和真实的dom通过各框架自己的算法进行对比,来修改真实dom结构,这就要比angular的viewmodel直接绑定真实dom树的操作要更有效率一些

4.2. 后台:

angular是google升级、维护。
react由facebook升级、维护。
vue是由中国人尤雨溪和他的团队负责。

4.3. 个人观点:

angular的缺点更明显、它难以调试的缺点更会影响一个项目在开发过程中的进度。
vue较小的生态环境和少解决方案也让它在大型项目的开发中败给了react。
所以我觉得react更适用在一个成规模的项目中去使用。 

框架或者库始终只是一个有助于开发的工具,无论使用哪个,都需要有扎实的js基础,没有哪个框架是脱离它的,我们可以不使用框架,但是不能不用js,只要把它掌握好了,无论哪个框架都能够更加轻松的上手

本人开发的微信小程序(已上线)、公众号及网站二维码:
有兴趣的可以进去看看或者动动你们勤劳的双手点个关注哟 作者在此谢谢大家了。
1、佩奇网(微信小程序):一个技术博客小程序,可支持领取外卖优惠券。

2、江小鱼(公众号):一个分享程序人生或者经验哲理的公众号
在这里插入图片描述
3、网站:暂时还没想好放什么,不过后续想好会放上去
在这里插入图片描述


码字不易,在线求个三连支持。

大家记得收藏前,先点个赞哦!好的文章值得被更多人看到。

关注江哥不迷路,带你编程上高速。

微信公众号关注:江小鱼吧 免费领取高级前端学习资料,转身涨薪20K

支付宝生态技术学习交流群:
加入Q群与更多BAT一线大佬深度交流:1136157571 (点我入群)




http://chatgpt.dhexx.cn/article/jCK1R51b.shtml

相关文章

三大框架-Spring

一 .概述 spring框架是以一个分层架构,有七个定义良好的模块组成,Spring模块构建在核心容器之上,核心容器定义了创建,配置和管理bean方式: 1.Spring Core:核心容器 ,提供Spring的基本功能. 2.SPring Contest:Spring上下文,是一个配置文件 3.Spring AOP : Spring 中面向切面…

JAVA的三大框架是什么?

Java自1995年发布以来,凭借着其跨平台、面向对象、泛型编程的特性发展至今可以说无Java不大厂。目前国内所有的大厂或多或少都在使用Java进行后端服务开发。 一、Java开发的三大框架 在14年以前,行业内用得最多的Java三大框架是Struts、Spring和Hiberna…

SSM三大框架Spring

一、三大框架基本结构 1.为什么需要框架 说明: 如果生产环境下的项目,都是从头(从底层写起)开发,难度太大了,并且开发的效率极其低下. 所以为了让项目快速的上线部署. 将某些特定的功能.进行了高级的封装. 那么我们如果需要使用封装后的API.,则必须按照人家的要求编码 2.框架…

外键的设置

关键词:外键 | 索引 | InNoDB和MyISAM | 引用 | Mysql 设置外键的目的:保证数据的一致性! 一、外键的使用条件: ① 两个表必须是InnoDB表,MyISAM表暂时不支持外键 #查看表类型SHOW TABLE STATUS#查询结果的Engine字…

外键(FOREIGN KEY)

引子:把所有数据都存放于一张表的弊端 1、表的组织结构复杂不清晰 2、浪费空间 3、扩展性极差 为了解决上述的问题,就需要用多张表来存放数据。 表与表的记录之间存在着三种关系:一对多、多对多、一对一的关系。 处理表之间关系问题就会…

什么是外键? 为什么需要外键?怎么使用外键?

首先我们先思考一个问题: 如何将京东"fuliuqingfeng"的用户信息及其多个邮寄商品地址保存到数据库中? 我们第一步会这样操作实现: create table user_info(id char(36) primary key,user_name varchar(30) not null,password varchar(30) …

MySQL外键(详解)

MySQL外键(详解) 什么是外键:    外键是指引用另外一个表中的一列或多列数据,被引用的列应该具有主键约束或者唯一性约束(简单来说外键是另一个表的主键或者唯一约束)。外键可以有重复的, 可以是空值&…

C/C++unlink函数的使用

一、头文件 #include<unistd.h> 二、函数原型 int unlink(const char *pathname); 三、函数介绍 unlink()函数功能即为删除文件。执行unlink()函数会删除所给参数指定的文件。 注意&#xff1a; 执行unlink()函数并不一定会真正的删除文件&#xff0c;它先会检查文件…

Linux下unlink函数的使用

一、头文件 #include<unistd.h> 二、函数原型 int unlink(const char *pathname); 三、函数介绍 unlink()函数功能即为删除文件。执行unlink()函数会删除所给参数指定的文件。 注意&#xff1a; 执行unlink()函数并不一定会真正的删除文件&#xff0c;它先会检查文件系…

Universal link的坑

当你觉得Universal link所有配置都没问题&#xff0c;但是通过浏览器打开Universal Link没有命中的时候看下这里 看了很多篇文章对比了Universal Link配置和流程之后没问题&#xff0c;浏览器打开还是不生效&#xff0c;最终在最关键的配置apple-app-site-association文件破案了…

unlink 和 remove 的区别

Linux下开发的时候,会经常使用unlink来删除文件的,而用C的时候,经常用remove删除文件. 这两者的去区别通过man手册发现&#xff1a;  当remove() 中的pahtname指定为目录时,相当于调用rmdir 删除目录,当remove() 中的pathname指定问文件时,相当于调用unlink 删除文件链接 所以…

004link()unlink()_LINUX

Linux的学习笔记 link、unlink1. 共享盘块2. link() 为已经存在的文件创建目录项&#xff08;硬链接&#xff09;头文件包含和函数声明 3. unlink() 删除一个文件的目录项头文件包含和函数声明Linux下删除文件的机制&#xff1a;demo 4. unlink 使用注意及隐性回收demo4.1 编译…

CTF PWN之heap入门 unlink

环境 ubuntu20 pwndbg patchelf glibc-all-in-one 为什么要用ubuntu不用kali&#xff0c;这里不做解释&#xff0c;总之就是自己在搭环境时出现了各种问题&#xff0c;但用ubuntu20不会出现&#xff0c; pwndbg&#xff0c;打pwn题必备&#xff0c;具体安装过程见gdb与ped…

NPM报错 Error: EPERM: operation not permitted, unlink......解决办法和清除缓存。

由于国内外环境因素&#xff0c;npm install安装依赖的时候经常会出现各种问题&#xff0c;特别是“Error: EPERM: operation not permitted, unlink…”这个错误。 在这里插入图片描述 这个错误因为报错信息的误导性&#xff0c;导致很多网上提出的解决办法都是什么设置权限…

vue 启项目报错Error: EPERM: operation not permitted, unlink

使用npm install安装依赖之后&#xff0c;有时候存在网络或其他问题安装不上个别依赖&#xff0c;其项目失败&#xff0c;报错 当启项目时报错&#xff1a;Error: EPERM: operation not permitted, unlink 此问题困扰好久&#xff0c;刚开始以为和其他人遇到的问题相似是因为管…

好好说话之unlink

堆溢出的第三部分unlink&#xff0c;这可能是有史以来我做的讲解图最多的一篇文章了累死 。可能做pwn的人都应该听过unlink&#xff0c;见面都要说声久仰久仰。学unlink的时候走了一些弯路&#xff0c;也是遇到了很多困扰的问题&#xff0c;会在后面的内容中做出标注。由于写的…

Unlink

Author&#xff1a;ZERO-A-ONEDate&#xff1a;2021-07-03 一、unlink的原理 简介&#xff1a;俗称脱链&#xff0c;就是将链表头处的free堆块unsorted bin中脱离出来然后和物理地址相邻的新free的堆块合并成大堆块&#xff08;向前合并或者向后合并&#xff09;&#xff0c;再…

unlink快速入门

0x01 正常unlink 当一个bin从记录bin的双向链表中被取下时&#xff0c;会触发unlink。常见的比如&#xff1a;相邻空闲bin进行合并&#xff0c;malloc_consolidate时。unlink的过程如下图所示&#xff08;来自CTFWIKI&#xff09;主要包含3个步骤&#xff0c;就是这么简单。 …

Linux常用命令——unlink命令

在线Linux命令查询工具(http://www.lzltool.com/LinuxCommand) unlink 系统调用函数unlink去删除指定的文件 补充说明 unlink命令用于系统调用函数unlink去删除指定的文件。和rm命令作用一样&#xff0c;都是删除文件。 语法 unlink(选项)(参数)选项 --help&#xff1a;…

element table表格,动态生成表头,基于可拖拽组件,拖动排序

效果展示 使用步骤 所需页面根据解释粘入 表格页面(父组件).txt 中代码&#xff0c; 引入dragList.vue组件 1.表格页面(父组件) <dragList radio"ssss" ></dragList> //引用子组件<el-tablev-if"asa":data"tableData"ro…