Angular & Vue & React 前端框架对比

一个是UI库（React），另一个是成熟的前端框架（Angular）,最年轻的（Vue）则可以称之为渐进式框架。这几个框架都是基于组件的框架，都有快速创建UI的功能。大部分时间它们可以相互替代来构建前端应用。

一、架构设计

Angular

       Angular框架属于MEAN框架，是完整的基于TypeScript的Web应用开发框架，主要用于构建单页Web应用(SPA)。与AngularJS这一早期框架不同，Angular2 是基于组件的，与 MV* 模式没有什么关联。Angular 的结构方式包括模块、组件和服务。
       在 Angular 框架中，每个组件都有一个类或模板，定义了应用逻辑和 MetaData（装饰器）。组件的这些元数据为创建和呈现其视图所需的构件在哪里提供了指引。
Angular 架构的另一个重要因素是，模板是用 HTML 编写的。它们还可以包含 Angular 模板语法，并带有特殊指令以输出响应式数据，并且可以渲染多个元素。
       服务 —— Angular 应用中的一个独特元素，被 Components 用于委托业务逻辑任务，如获取数据或验证输入。虽然使用服务并没有严格执行，但是将应用程序结构作为一组可复用的不同服务则是比较明智的。

React

       React 是一个开源的前端库，主要用于开发用户界面，React 来自 MERN 架构。这种灵活的前端解决方案并不强制执行特定的项目结构。一个 React 开发者可能只需要几行代码就可以开始使用它。
       React 是基于 JavaScript 的，但在大多数情况下，它与 JSX（JavaScript XML）相结合。JSX 是一种语法扩展，允许开发人员同时创建包含 HTML 和 JavaScript 的元素。实际上，开发者可以用 JSX 创建的任何东西也可以用 React JavaScript API 创建。React 元素比 DOM 元素更强大，它们是 React 应用的最小组成部分，即组件。
        React 组件是一种构建模块，它决定了在整个 Web 应用中使用独立和可重用的组件。

Vue

       用于开发用户界面和单页 Web 应用，Vue 是一个开源的 Model-View-View-Model (MVVM) 前端 JavaScript 库。它被称为渐进式框架，与其它工具一起被用于前端开发。Vue 的多用途、高性能和它在 Web 应用程序上的最佳用户体验成就了它的流行。
       使用 Vue 时，开发者主要在 ViewModel 层上工作，以确保应用数据的处理方式能让框架呈现最新的视图。
       Vue 的模板语法将可识别的 HTML 与特殊的指令和功能相结合。该语法允许开发人员创建 View 组件。
       现在 Vue 中的组件是小巧、自成一体和可复用的。单文件组件（SFC）使用扩展名 .vue ，包含 HTML、JavaScript 和 CSS，因此所有相关代码都存放在同一个文件中。
      在大型的 Vue.js 项目中，我们通常推荐使用 SFC 来组织代码。要将 SFC 移植到工作的 JavaScript 代码中，你需要 Webpack 或 Browserify 这样的构建工具。

二、适用目标和范围

Angular

Angular适用于大型和高级项目，可能包括但不限于：

• 用于开发渐进式 Web 应用程序（PWA）。
• 用于重新设计网站应用程序。
• 用于建立基于内容的动态网页设计。
• 用于创建有着复杂基础架构的大型企业应用程序。

React

React来自MERN架构，一种以构建复杂的业务应用程序而闻名的技术架构。当它与Redux、MobX或其他flux模式的状态管理库一起使用时，React就能成为强大的工具。React最适合以下项目：

• 对于涉及包含导航项，折叠或展开的手风琴分节，可用或不可用状态，动态输入，可用或不可用按钮，用户登录，用户访问权限等的许多组件的应用程序。
• 对于具有扩展和增长可能的项目，因为 React 组件具有声明性，因此它可以轻松处理此类复杂结构。
• 当 UI 是网络应用程序的中心时。

Vue

因为Vue具有可接受且快速学习曲线，Vue最适合解决短期的小型问题。它可以轻松的与代码块集成。

• 你需要带有动画或交互式元素的 Web 应用程序的开发项目。
• 无需高级技能即可进行原型制作。
• 需要与多个其他应用程序无缝集成的应用程序。
• 更早推出 MVP。

各自的优点

Angular
有对模板、表单、引导程序或架构、组件以及组件之间交互的完整的文档：

• 平滑的双向数据绑定。
• MVC 架构。
• 内置模块系统。
• 大大减少了网页的初始加载时间。

React

• 通过模块化的结构使其拥有灵活的代码，节省时间和成本。
• 助力复杂应用程序的高性能的实现。
• 使用 React 前端开发能够更容易去做代码维护。
• 支持适用于 Android 和 iOS 平台的移动端原生应用程序。

Vue

• 它的体积小巧，便于安装和下载。
• 倘若我们正确利用，我们就可以在多处重用 Vue。
• Vue.js 允许我们更新网页中的元素，而无需渲染整个 DOM，因为它是虚拟的 DOM。
• 需要较少的优化。
• 加速 Web 应用程序的开发，并允许大佬将模板到虚拟 DOM 与编译器分开。
• 经过验证的兼容性和灵活性。
• 不管应用程序的规模如何，代码库都不会变。

本文转载链接：https://juejin.cn/post/6943068367125381127