个人对比Vue、React和angular三大前端框架小小见解

逃离我推掉我的手 2021-12-13 02:55 729阅读 0赞

### 1.angular ###

![在这里插入图片描述][20190713140545244.png]

#### 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，它是英文的。

--------------------

![在这里插入图片描述][20190713140325713.png]

### 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这个生命周期函数方法来进行控制

--------------------

![在这里插入图片描述][20190713140431454.png]

### 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，只要把它掌握好了，无论哪个框架都能够更加轻松的上手

[20190713140545244.png]: /images/20211210/2dfc91db165340d1abafe71ce120ece7.png
[20190713140325713.png]: /images/20211210/13bfcae271304c5ab48b8924dca785fb.png
[20190713140431454.png]: /images/20211210/7f8cc8f3260341538ac6260582ca51d5.png