框架实战指南-前言

本文是系列文章的一部分：框架实战指南 - 基础知识

欢迎阅读第一本框架实战指南，名为《基础》。本书凝聚了作者近十年的专业软件开发生涯，也经过了两年多的写作、编辑和润色，是未来 Web 前端开发三部曲的第一部。

本系列将教您如何构建应用程序、现代 Web 框架下的概念以及高级编码模式，以帮助您提升工程水平。

虽然其他资源可以帮助您一次学习一个框架的这些概念，但本系列将帮助您一次学习三个不同的框架：React，Angular 和 Vue。

也就是说，我们将研究这些框架的最新迭代：React 18、Angular 19 和 Vue 3。

值得一提的是，React 和 Angular 的主要版本迭代频率远高于 Vue。因此，如果您以后阅读本文时看到“Angular 24”或“React 22”，则很可能它们在底层使用了类似的概念。

我们之所以能做到这一点，是因为尽管这些框架在很多方面存在差异，但它们都秉承着相同的基本理念，这些理念在任何现代应用程序中都发挥着主导作用。然而，这并不意味着它们完全相同，因此，我将抽出时间分别对每个框架进行阐述，解释它们的不同之处以及它们背后的工作原理。

在本系列结束时，您应该能够自信地使用这些框架浏览任何代码库。

但我要说的有点超前了；首先，让我们回答一些基本问题。

我今天为什么要学习 Web 开发？

学习 Web 开发是软件工程的一项重要技能。即使你最终没有从事 Web 技术工作，你的项目最终使用 Web 技术的可能性也非常高。了解并理解 Web 前端的局限性可以：

• 使与这些团队的沟通变得更简单。
• 使构建有效的后端 API 变得更容易。
• 允许您将这些知识转移到其他 UI 开发。

更重要的是，就业市场规模绝对庞大。美国劳工统计局的数据显示：

预计2020年至2030年，计算机和信息技术行业的就业人数将增长13%，高于所有职业的平均增长速度。预计这些行业将新增约66.76万个就业岗位。

[...]

2020 年 5 月，计算机和信息技术职业的年薪中位数为 91,250 美元。

虽然这个数字可能只针对美国，其他国家和市场也可能有不同的比率，但编程往往是可持续的长期职业的良好选择。

我为什么要学习这些工具？

虽然学习 Web 开发作为一项工程工作技能具有广泛的帮助，但学习这些框架尤其有益处。

生态系统规模

首先，这些工具已被广泛采用。React 、Angular 和 Vue 在 2021 年占据了 Web 的 9%，并且还在持续增长。虽然这听起来可能不多，但请记住，截至 2022 年，网站数量已超过 19 亿；即使 1% 也占了近 1000 万个网站。

例如，仅 NPM 平台的 React 每周下载量就高达 1700 万次，并支持 Meta 的产品（包括 Facebook、Instagram 和 Messenger）。此外，React 被众多公司使用；从财富 500 强企业到热门初创公司，都在不同程度地使用 React。

同样，尽管规模较小，Angular 如今依然生机勃勃（不像它的名字相似却又截然不同的前身“AngularJS”）。Angular 每周从 NPM 下载量超过 200 万次，并为微软 Xbox 网站、Office Web Home 网站、谷歌 Voice 网站、Messages 网站、Firebase 仪表盘等众多网站提供支持。

最后，Vue 在过去几年中取得了快速发展。从2019 年的 5000 万次下载到 2022 年 NPM 上的超过 1.25 亿次下载，它在生态系统中取得了惊人的成功。此外，Vue 在中国的采用率也非常高。在中国，Vue 的采用者包括大型购物网站阿里巴巴和视频分享平台哔哩哔哩。

生态系统工具

虽然生态系统规模很大，但如果没有大量的工具来增强开发人员的体验和上述框架的功能，那么它就毫无意义。

幸运的是，对于这三个框架来说，无数的工具都是建立在它们的基础之上的。

例如，您是否想在项目中添加静态站点生成或服务器端渲染以增强 SEO？没问题：React 有Next.js和Gatsby，Angular 有Angular SSR和Analog，Vue 有NuxtJS和VuePress。

想要添加路由器来为你的应用添加多个页面吗？React 有“React 路由器”，Angular 有其内置路由器，而 Vue 有“Vue 路由器”。

你想添加全局状态管理，以便更轻松地在整个应用程序之间共享数据吗？React 有Redux，Angular 有NgRx，Vue 有Vuex。

清单的列表很长很长。更妙的是，我给的每份清单都不全面！

事实上，虽然这些框架传统上与浏览器的网络相关联，但甚至还有生态系统工具允许您将 Angular、React 或 Vue 嵌入到移动和本机应用程序中。

这些工具包括用于桌面应用的ElectronJS和Tauri，以及用于移动端的React Native和NativeScript。虽然 React Native 仅支持 React，但我提到的其他选项也支持我们将要讨论的三个框架。

虽然本书不会涉及生态系统的大部分内容，但我们三部曲中的第二本书的标题将是“生态系统”。“生态系统”将教您如何整合本书介绍的基础知识，以便使用这些社区工具构建更复杂的应用程序。

谁在建造什么？

这并不是说这些工具能够继续存在的唯一原因是因为它们很受欢迎；这些框架中的每一个背后都至少有一个著名的支持者。

React 由 Meta 构建，并支持其所有主要应用程序。此外，核心团队已开始通过由主题专家组成的“工作组”就框架开发提供反馈，从而接受外部贡献。近年来，甚至像 Vercel 这样的团队也聘请了 Meta 以外的 React 核心成员来开发该项目。

然而，大多数人提到“React”时，往往指的是整个 React 生态系统。React 的核心维护者往往只专注于一小部分工具。相反，他们依赖Remix和Vercel等外部团队来提供应用程序开发中必不可少的库。

另一方面，Angular 完全由 Google 资助和支持。他们在其框架之上构建了相当一部分主要网站，因此，他们对持续发展有着浓厚的兴趣。与 React 的不同之处在于，Angular 核心团队维护着一系列辅助库，提供从HTTP 调用层到表单验证的所有内容。

谈到资金，Vue 常常显得格格不入。Vue 的开发由一个独立团队推动，由来自不同团体和个人的众筹平台进行。虽然目前尚不清楚他们筹集了多少资金，但可以肯定的是，其中肯定有阿里巴巴、百度、小米等重量级的金融投资者。

与 Angular 类似，Vue 核心团队由致力于广泛工具集的团队组成。从官方路由库到其两个不同的全局存储库（Vuex和Pinia），以及其他所有内容都被视为 Vue 核心的一部分。

为什么要学习这三个框架？

虽然显而易见的答案是“它拓宽了你能做的工作类型”，但同时学习多个框架的原因有很多。

具体来说，每个框架都有其自身的限制、规则和最佳实践。这些规则和限制可以帮助你理解一种不同的编码方式，而这种编码方式通常会迁移到其他框架。

例如，Angular 专注于面向对象编程，而 React 生态系统则偏向函数式编程。虽然它们各自的含义并不重要，但它们允许你以不同的方式完成许多相同的事情，并且各有优缺点。

因此，一旦您掌握了每一种方法，您就可以选择在应用程序的各个部分中应用哪种编程方法。

考虑支持

除此之外，重要的是要记住，这三个框架并不是 Web 开发中唯一的选择。例如，Svelte 是一个越来越受欢迎的替代方案。虽然它与我们正在学习的三个选项有更大的不同，但 Svelte 仍然与 React、Angular 和 Vue 共享许多基础。

这种知识转移并不仅限于 JavaScript 或 Web 开发。你对编程任何方面了解得越多，就越能将其运用到其他语言或类型的编程中。我在 Web 开发中使用过的许多 API，在使用原生语言进行工程工作时也同样有用。

这些工具会继续存在吗？

说实话？谁说得准呢。生态系统本身就存在波动；很多开发者在 React 生态系统中待了这么久，肯定会感到某种程度的倦怠。

但事实是：这些工具得到了一些最大公司的广泛支持和使用。

这些类型的工具不会在一夜之间消失，与这些工具相关的工作也不会。

以 ColdFusion 为例。如果你问大多数前端开发者，他们很可能要么不知道 ColdFusion，要么认为它已经死了。毕竟，ColdFusion 的历史可以追溯到 1995 年，而且至今仍然是一种专有的付费编程语言——是的，付费编程语言确实存在。

但 ColdFusion 并没有消亡！（我的朋友 Mark 在几千里之外都能听到他兴奋地大喊大叫，表示赞同。）如今，ColdFusion 仍然被像 2024 年 的 Angular 一样多的网站使用，并且它维持着一个相当规模的生态系统，足以让 Adobe 在 27 年后继续维持这门语言的开发。

此外，从文化角度来看，许多开发人员也厌倦了以看似极快的速度在新框架之间来回切换。许多公司可能会选择使用这些工具的时间比预期的要长，仅仅是因为他们对这些工具的熟练程度有所提升。

仅仅因为一个工具是新的并不意味着它本质上更好；即使是更好的感知工具也可能由于各种原因而不会被选择。

先决条件是什么？

我们将从基础开始学习 React、Angular 和 Vue，直到了解这些框架的内部工作原理。

您不需要具备这些框架的任何先决知识，也不需要具备 JavaScript、HTML 或 CSS 的先决知识。

事实上，我会尽力提供所有预计会用到或对后续学习有帮助的内容的链接。不过，如果你对这些主题还不熟悉，建议你先阅读以下资料：

• “计算机如何说话”——介绍计算机如何获取“源代码”并将其转换为机器代码。
• “HTML、CSS 和 JavaScript 简介”——解释 Web 开发的三个基本原理以及如何使用它们来构建网站。
• “CSS 基础知识”——介绍 CSS 的工作原理和您应该了解的常用规则。
• “WebDev 101：如何使用 NPM 和 Yarn”——解释什么是“Node”，什么是“NPM”，以及如何使用它们。
• “理解 DOM：浏览器如何在屏幕上显示内容”——对“DOM”的解释以及它与 HTML 的关系。

我们没有学到什么？

在了解我们将要学习的一些具体内容之前，让我们先讨论一下我们不会在本系列中花费专门时间学习的内容：

• 独立 JavaScript API
• CSS
• 代码检查工具，例如 ESLint 或 Prettier。
• IDE 功能，例如 VSCode、WebStorm 或 Sublime Text。
• TypeScript——虽然 Angular 代码示例会包含其中的一部分，但我们不会深入探讨其细节。

所有这些主题本身都很广泛，内容丰富，足以写成一本书。毕竟，缺乏清晰范围的资源会面临解释肤浅、内容过渡不顺畅，甚至出版延期等问题。

记住，知识就像一张网——这些主题以错综复杂的方式交织在一起！你可以花时间学习这些知识，甚至可以限制你的学习范围，专注于特定的知识子集。没有人能够完美地掌握所有这些知识，这很正常！

但是，再次强调，如果这些主题中的任何一个与本书相关，我们将链接到可帮助您探索更多内容并拓宽知识面的资源。

内容大纲

在了解了我们不会看的内容之后，让我们来讨论一下我们将要学习的内容：

• 什么是“组件”

  • 将您的应用程序分解成更多模块化的部分
  • 组件和元素与其他组件和元素之间的关系
  • 在组件内添加程序逻辑
  • 什么是“反应性”以及 React、Angular 和 Vue 如何更轻松地显示更新的值
  • 将反应属性绑定到元素
  • 将值传递到你的组件
  • 将用户事件绑定到开发人员定义的行为
  • 将值从子组件传递回其父组件

• 使用动态 HTML 更改 UI

  • 有条件地渲染应用程序的各个部分
  • 渲染列表和循环
  • React 和 Vue 等框架的“协调”细微差别

• 通过副作用处理用户输入和输出

  • 在 UI 框架之外解释“副作用”是什么
  • 在框架范围内重新引入概念
  • 在组件渲染期间触发副作用
  • 清除副作用
  • 为什么我们需要清除副作用（包括现实世界的例子）
  • 我们如何验证我们已经清除了副作用
  • 处理重新渲染
  • 跟踪组件内状态更新以触发副作用
  • 框架的生命周期，包括渲染、提交和绘制
  • 无需重新渲染即可更改数据

• 使用派生值将状态建立在另一个值的基础上

  • 使用 prop 监听的简单实现
  • 使用框架原语的更周全的实现

• 使用透明元素解决标记问题

• 将子项传递到组件中

  • 传一个孩子
  • 传递多个子代

• 在代码中保留对 HTML 元素的引用

  • 一次跟踪多个元素
  • 实际使用情况

• 从父级引用组件的内部结构

  • 实际使用情况

• 跟踪应用程序中发生的错误

  • 记录错误
  • 忽略错误以允许用户继续使用该应用
  • 当您的应用无法从错误中恢复时显示回退

• 使用依赖注入在整个应用程序中传递复杂数据

  • 注射后改变值
  • 选择不提供可选值
  • 在整个应用程序中传递数据
  • 根据您与数据源的距离覆盖特定数据
  • 找到适合您组件需求的正确数据
  • 了解一致数据类型的重要性

• 如何避免使用 CSSz-index门户带来的麻烦

  • z-index首先了解问题的原因
  • 解释什么是门户
  • 使用特定于组件的门户
  • 使用应用程序范围的门户
  • 使用 HTML 范围的门户

• 通过共享组件逻辑创建可组合实用程序

  • 共享数据创建方法
  • 共享副作用处理程序
  • 编写自定义逻辑

• 使用指令轻松向 HTML 元素添加行为

  • 解释什么是指令
  • 展示基本指令
  • 如何给指令添加副作用
  • 将数据传递给指令

• 修改和访问组件的子项

  • 计算组件的子组件数量
  • 循环修改每个子项
  • 将值传递给预计的子代

这看起来可能让人不知所措，但请记住，本书旨在成为从“新手”到“专家”的资源。您绝对不需要一次性全部掌握。您可以随时停下来，去其他地方看看，然后等您方便的时候再回来。本书不会消失，并且将永远免费在线提供；它是开源的，以确保这一点。

等等，还有更多！虽然这是本系列第一本书的大纲，但之后还会有两本书讲解 React、Angular 和 Vue。第二本书将重点介绍这些工具的生态系统，第三本书将专注于内部原理和高级用法。

本书将尝试构建一个“组件简介”章节中概述的单个应用程序。在本书结束时，您将拥有一个功能齐全的用户界面，该界面是您通过本书中展示的代码示例和挑战自行构建的。

如果您已经是特定框架的专业人士并希望快速学习，我们还将提供易于参考的资源：

• 与这些框架相关的各种术语的词汇表
• 这些框架之间等效 API 的查找表

关于框架细节的说明

最后，在阅读本书的其余部分之前，我想谈谈有关这些框架的几点：

以下是我们在本书有关 Vue 的教学中应该记住的一些细微差别：

我们正在使用 Composition API

Vue 有两种不同的编写代码的方式：“Options” API 和“Composition” API。

虽然“Options” API 已经存在很久了，而且与 Angular 的类更相似，但本书将使用 Vue 的“Composition API” 。原因如下：

1. Composition API 较新，并且似乎比 Options API 更受新应用程序的青睐。
2. Composition API 与 React 的 Hooks 共享一些 DNA，使得解释跨框架概念更加容易。
3. 一旦完全掌握了 Options API，学习 Composition API 就相对简单了。
4. 他们的文档很好地提供了 Options API 和 Composition API 中的代码示例——让您可以更轻松地学习这两者。
5. 该项目的创建者和首席维护者 Evan You 告诉我这么做的。😝

同样，本书也不会介绍Vue 即将推出的另一个基于编译器的语法选择，即$refsugar。然而，本系列丛书中的“内部”一书将带你了解所有这些不同的 API，了解它们存在的原因，以及它们是如何相互构建的。

我们正在使用 SFC

Vue 是一个高度灵活的框架，因此允许您使用各种方法定义组件，每种方法都有其优点和缺点。

本书将特别关注使用“单文件组件”（简称 SFC）方法通过文件创建 Vue 组件.vue。

虽然“Internals”一书（该系列的第三本）将介绍其他方法及其底层工作原理，但 SFC 通常被用作大多数应用程序创建 Vue 组件的实际方法。

不用多说，让我们开始吧。