2024主流前端框架对比和选择

Hello，大家好，我是Feri，一枚十多年的程序员，同时也是一名在读研究生，关注我，且看一个平凡的程序员如何在自我成长，CodingSir是我想打造一个编程社区，只为各位小伙伴提供编程相关干货知识，希望在自我蜕变的路上，我们一起努力，努力什么时候开始都不晚，我，从现在开始做起！

一、前言

        我看有小伙伴，私聊我，想要说说目前主流的前端框架和之间的区别，开发的时候怎么选择？那么安排，必须妥妥的安排上，所以今天就聊聊目前前端主流框架的对比和开发的时候怎么选择？小白到底该如何选择？主要通过2024年前端的主流框架实际开发方面进行一下解析，希望各位小伙伴有所收获，废话不多说，开搞。

二、实现

2.1 2024主流的前端框架

2.2 React

1.React概述

React（有时叫React.js 或 ReactJS）是Facebook推出的一个为数据提供渲染为 HTML 视图，用来构建用户界面的开源 JavaScript 库。

React 视图通常采用包含以自定义 HTML 标记规定的其他组件的组件渲染。React 为程序员提供了一种子组件不能直接影响外层组件（"data flows down"）的模型，数据改变时对 HTML 文档的有效更新，和现代单页应用中组件之间干净的分离。

React官网地址：https://www.reactjscn.com/

2.目前招聘职位

3.特性：

A.声明式

React 可以非常轻松地创建用户交互界面。为你应用的每一个状态设计简洁的视图，在数据改变时 React 也可以高效地更新渲染界面。以声明式编写 UI，可以让你的代码更加可靠，且方便调试。

B.组件化

创建好拥有各自状态的组件，再由组件构成更加复杂的界面。无需再用模版代码，通过使用 JavaScript 编写的组件你可以更好地传递数据，将应用状态和 DOM 拆分开来。

C.一次学习，随处编写

无论你现在正在使用什么技术栈，你都可以随时引入 React 开发新特性。React 也可以用作开发原生应用的框架 React Native。

2.3 Vue

1.Vue概述

Vue (发音为 /vjuː/，类似 view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。

Vue官网地址：https://cn.vuejs.org/

2.Vue2和Vue3:

Vue3是Vue当前的最新主版本。它包含了一些Vue2中没有的新特性 (比如Teleport、Suspense，以及多根元素模板)。同时它也包含了一些与Vue2非兼容性的变更。

尽管存在差异，但大多数VueAPI在两个大版本之间是共享的，所以Vue2知识将继续在Vue3中发挥作用。需要注意的是，组合式API原本是一个Vue3独有的特性，但目前已兼容至Vue2且在Vue2.7 中可用。总的来说，Vue3提供了更小的包体积、更好的性能、更好的可扩展性和更好的TypeScript/IDE支持。如果现在要开始一个新项目，推荐选择Vue3

3.Vue3特有语法：

1. Composition API: 这是Vue 3中的一个新特性，它允许开发者通过创建setup函数来使用reactive, ref, computed等API。
2. Fragment: Vue 3允许组件有多个根节点，这通过Fragment来实现。
3. Teleport: Teleport 是一个将子组件内容渲染到DOM的某个不同位置的功能。
4. Emits: 在Vue 3中，组件的emits选项允许你明确声明组件可以接受的事件。
5. Data Injections: Vue 3中的provide/inject用于父组件向子孙组件注入数据，而不需要显式地通过props传递。

4.Vue特性：

• 无需构建步骤，渐进式增强静态的 HTML
• 在任何页面中作为 Web Components 嵌入
• 单页应用 (SPA)
• 全栈 / 服务端渲染 (SSR)
• Jamstack / 静态站点生成 (SSG)
• 开发桌面端、移动端、WebGL，甚至是命令行终端中的界面

5.目前招聘的职位：

2.4 Angular

1.Angular概述：

AngularJS诞生于2009年，由Misko Hevery等人创建，是一款构建用户界面的前端框架，后为Google所收购。 Angular是AngularJS的重写，Angular2以后官方命名为Angular，2.0以前版本称为AngularJS。AngularJS是用JavaScript编写，而Angular采用TypeScript语言编写，是ECMAScript6的超集。

Angular是一个应用设计框架与开发平台，用于创建高效、复杂、精致的单页面应用，通过新的属性和表达式扩展了 HTML，实现一套框架，多种平台，移动端和桌面端。 Angular有着诸多特性，最为核心的是：MVVM、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。

AngularJS官网地址：AngularJS — Superheroic JavaScript MVW Framework

2.Angular特性：

1. 双向数据绑定：AngularJS使用双向数据绑定机制，可以实时更新视图和模型之间的数据变化，减少了手动操作DOM的需要，提高了开发效率。
2. 模块化设计：AngularJS使用模块化的方式组织代码，使得应用程序更易于维护和扩展。
3. 依赖注入：AngularJS支持依赖注入，可以方便地管理组件之间的依赖关系。
4. 指令系统：AngularJS提供了丰富的指令，可以扩展HTML的功能，实现自定义的行为和样式。
5. 测试友好：AngularJS提供了强大的测试工具和框架，可以方便地进行单元测试和集成测试。
6. 组件化：Angular应用是完全组件化的，每个Angular应用都至少包含一个根组件，并且这个根组件可以包含其他子组件。组件之间通过输入/输出属性、服务或者事件发射器进行通信，这样的设计让代码更加模块化，提高了代码的可读性和可维护性

3.Angular招聘：

三、总结

        好啦，通过刚刚的内容，这3个框架，是不是还是有一些区别的？如果条件允许建议3个都会点，然后把其中一种框架深入研究，可以熟练使用框架进行项目的开发无论是实现PC端的系统还是移动端的App都需要快速上手，具备独立开发，这样求职才更有出路。但是相对而言，Angular的职位相对较少，所以只是为了求职还是建议Vue或React。无论选择哪个，都需要静下心，努力沉淀，方可有路可走。如果你对前端框架还有什么想要了解的欢迎评论区或私信我，或者你想要一些好用的半成品项目，也都可以给大家进行分享哟。

        如果本篇对你有所帮助，希望给我来个关注、收藏、评论一键三连哟，感谢各位的支持，你的支持就是我前进的动力！

好啦，今天这篇就打这啦，有任何问题可以随时进行评论交流，如果你有什么想要Feri更新的，请关注CodingSir查看更新的内容，也可以随时关注，私信我哟，成长的路上，有你们相伴，真是人生一大幸事！