Angular React Vue 比较 - 前言

基于对前端编程的热爱，也为了在技术领域有更进一步的探索，有了一个对前端三大框架知识系统梳理的想法。这个系列文章的核心点是比较，这个灵感来自于比较政治学，旨在通过比较来加深对三大框架知识的理解。

概述

Angular、React、Vue 都可以称之为现代比较主流的开发框架，市场上大量的应用和网页都是使用它们开发的。

Angular 是一个成熟的框架，React 是一个 UI 库，Vue 是一个渐近式框架。这是目前业界对这三个框架主流的评价，那么它们都有哪些区别呢？本系列文章试图抽象出它们共有或相似的功能，再对这些功能做更进一步的比较。在这之前，让我们先回顾一下 Web 前端的发展历程。

Web 前端发展历程

Web 前端开发最初的网页主要是静态的，以 HTML 为主，只包含简单的文本和图片。网页做为一种新型的信息媒介改变了人们的生活方式，人们不满足只是简单的信息浏览。随着浏览器技术的不断发展，JavaScript、CSS 等前端技术逐渐出现，使得网页可以实现动态效果和更丰富的交互功能。

随着网络技术的发展和普及，网页设计开始逐渐复杂化。为了实现更丰富的视觉效果和交互功能，JavaScript 和 CSS 等技术开始被广泛应用。伴随着市场上巨量的需求释放，在不断的开发实践过程中，各种前端框架和工具也开始出现，例如 jQuery、Bootstrap 等，它们的标准化解决方案更有助于大型项目中开发团队的协作，简化了前端开发的过程，提高了开发效率和代码质量。

随着互联网的快速发展，Web 前端开发的需求也在不断增长。为了满足移动设备的需求，响应式设计和移动优先的设计原则也越来越受到重视。同时，前端开发也出现了 MV 架构和SPA（Single Page Application）等新的概念和技术，使得前端开发更加模块化、组件化和易于维护。前端开发也出现了更多新的技术和工具，这个时候 Angular、React、Vue它们登场了，它们使得前端开发更加高效、快速和灵活。

总的来说，工具/框架都是在不断的实践与应用中产生的，它们也都有自身的生命周期。不过以人类在各学科科学技术积累的历史经验来看，即使它们有被淘汰的一天，这些框架的应用实践也会为后来者提供宝贵的经验。技术会过时，但是技术思想必然是延续的。

让我们把讨论的话题回到三大框架中来，下面是它们官方文档上对于框架自身的描述：

• Angular 是一个应用设计框架与开发平台，旨在创建高效而精致的单页面应用。
• React 是用于构建 Web 和原生交互界面的库，它可以改变你对可见设计和应用构建的思考。
• Vue 是一款渐近式框架，易学易用，性能出色，适用场景丰富的 Web 前端框架。

什么是 Angular ？

Angular 是一个基于 TypeScript 构建的开发平台。它包括：

• 一个基于组件的框架，用于构建可伸缩的 Web 应用
• 一组完美集成的库，涵盖各种功能，包括路由、表单管理、客户端-服务器通信等
• 一套开发工具，可帮助你开发、构建、测试和更新代码

借助 Angular，无论单人项目还是企业级应用，你都能获得平台带来的优势。Angular 的设计目标之一就是让更新更容易，因此你可以用最小的成本升级到最新的 Angular 版本。最重要的是，Angular 的生态系统由包括 170 万名开发人员、库作者和内容创作者在内的多元团队构成。

什么是 React ？

React 可以改变你对可见设计和应用构建的思考。当你使用 React 构建用户界面时，你首先会把它分解成一个个 组件，然后，你需要把这些组件连接在一起，使数据流经它们。

React 不仅仅是一个库、一种架构，甚至不只是一个生态系统。React 是一个社区。在这里你可以寻求帮助，发现机会并结交新朋友。你将会遇到开发者和设计师、初学者和专家、研究人员和艺术家、教师和学生等各行各业的人士。我们的背景可能非常不同，但 React 让我们所有人都能够共同创建用户界面。

什么是 Vue ？

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

根据你的需求场景，你可以用不同的方式使用 Vue：

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

我们要比较什么 ？

生物学上有塑料人体的模型，地理学上有天气预测模型，心理学、经济学、物理学也都有各自的模型。模型的好处是它把问题简化后，能更清晰的呈现给我们重点内容。我们在三大框架的比较过程中，也把它们简化成了一个模型，这个模型由以下部分组成：

• 组件
  • 生命周期
  • Props
  • Slots
  • 事件
  • 动态组件
  • 异步组件
  • 内置组件​​​​​​​
• 模板
  • 插值
  • 绑定
  • 引用
• 指令
  • 属性型指令
  • 结构型指令
  • 自定义指令
• 注入
• 状态

在本系列的文章中，我们将围绕这五部分内容来进行更进一步的比较。后续发布的每一篇文章都会涉及到三大框架中的一个知识点，围绕这个知识点会列出三大框架的理念与实现方法。所以如果你只熟悉其中某一个框架，可以以此框架的知识为基点去参考其他框架的设计理念以加深对这个知识点的理解。

由于本人时间与能力有限，在对三大框架比较的文章会有遗漏、错误等各方面的问题，还望看到的同行们在评论区及时提出，并请多多包涵！如果发布的文章对您有那么一点点的帮助，那将是我最大的荣幸！