📘 内容声明（Content Disclaimer）

本站仅用于个人学习与技术研究用途，所涉及的内容包括书籍摘录、阅读笔记、整理总结等，部分内容可能参考了网络公开资源及教材书籍中的原文、图片或结构。

本站不用于商业用途，也不以传播盗版为目的，全部内容仅供个人记录与复习。

如有内容不当引用或侵犯到原作者/出版社的合法权益，请通过 issue 或邮箱与我联系，我将在第一时间进行调整或删除。

内容提要

本书基于 Vue.js 3，从规范出发，以源码为基础，结合大量直观的配图，循序渐进地讲解 Vue.js 中各个功能模块的实现和框架设计原理。

全书共 18 章，分为六部分，详细解析了框架设计的权衡与原则、响应系统的实现、渲染器的技术细节、组件化实现、编译器核心技术以及服务端渲染的实现方法。

通过对 Vue.js 的深入剖析，不仅帮助有经验的开发者更深入地理解框架的工作机制，也为初学者提供了快速掌握 Vue.js 设计原理的路径。

无论是 Vue.js 的现有用户还是对框架设计感兴趣的前端开发者，都能从本书中获得有价值的知识和实践经验。

前言

引言

Vue.js 作为最流行的前端框架之一，在 2020 年 9 月18 日，正式迎来了它的 3.0 版本。 得益于 Vue.js 2 的设计经验，Vue.js 3.0 不仅带来了诸多新特性，还在框架设计与实现上做了很多创新。 在一定程度上，我们可以认为 Vue.js 3.0“还清”了在 Vue.js 2 中欠下的技术债务。

在我看来，Vue.js 3.0 是一个非常成功的项目。它秉承了 Vue.js 2 的易用性。 同时，相比 Vue.js 2，Vue.js 3.0 甚至做到了使用更少的代码来实现更多的功能。

Vue.js 3.0 在模块的拆分和设计上做得非常合理。模块之间的耦合度非常低，很多模块可以独立安装使用， 而不需要依赖完整的 Vue.js 运行时，例如 @vue/reactivity 模块。

Vue.js 3.0 在设计内建组件和模块时也花费了很多精力，配合构建工具以及 Tree-Shaking 机制，实现了内建能力的按需引入，从而实现了用户 bundle 的体积最小化。

Vue.js 3.0 的扩展能力非常强，我们可以编写自定义的渲染器，甚至可以编写编译器插件来自定义模板语法。同时，Vue.js 3.0 在用户体验上也下足了功夫。

Vue.js 3.0 的优点包括但不限于上述这些内容。既然 Vue.js 3.0 的优点如此之多，那么框架设计者是如何设计并实现这一切的呢？ 实际上，理解 Vue.js 3.0 的核心设计思想非常重要。它不仅能够让我们更加从容地面对复杂问题，还能够指导我们在其他领域进行架构设计。

另外，Vue.js 3.0 中很多功能的设计需要谨遵规范。例如，想要使用 Proxy 实现完善的响应系统，就必须从 ECMAScript 规范入手， 而 Vue.js 的模板解析器则遵从 WHATWG 的相关规范。所以，在理解 Vue.js 3.0 核心设计思想的同时，我们还能够间接掌握阅读和理解规范，并据此编写代码的方法。

读者对象

本书的目标读者包括：

• 对 Vue.js 2/3 具有上手经验，且希望进一步理解 Vue.js 框架设计原理的开发人员；
• 没有使用过 Vue.js，但对 Vue.js 框架设计感兴趣的前端开发人员。

本书内容

本书内容并非“源码解读”，而是建立在笔者对 Vue.js 框架设计的理解之上，以由简入繁的方式介绍如何实现 Vue.js 中的各个功能模块。

本书将尽可能地从规范出发，实现功能完善且严谨的 Vue.js 功能模块。例如，通过阅读 ECMAScript 规范，基于 Proxy 实现一个完善的响应系统； 通过阅读 WHATWG 规范，实现一个类 HTML 语法的模板解析器，并在此基础上实现一个支持插件架构的模板编译器。

除此之外，本书还会讨论以下内容：

• 框架设计的核心要素以及框架设计过程中要做出的权衡；
• 三种常见的虚拟 DOM（Virtual DOM）的 Diff 算法；
• 组件化的实现与 Vue.js 内建组件的原理；
• 服务端渲染、客户端渲染、同构渲染之间的差异，以及同构渲染的原理。

源代码及勘误

任何错误，包括但不限于别字、代码片段、描述有误等，勘误请至 GitHub（HcySunYang）或图灵搜索 《Vue.js设计与实现》查看。

目录概览

1. 框架设计概览

   • 权衡的艺术：主要讨论了命令式和声明式这两种范式的差异，以及二者对框架设计的影响，还讨论了虚拟 DOM 的性能状况，最后介绍了运行时和编译时的相关知识，并介绍了 Vue.js 3.0 是一个运行时 + 编译时的框架。
   • 框架设计的核心要素：主要从用户的开发体验、控制框架代码的体积、Tree-Shaking 的工作机制、框架产物、特性开关、错误处理、TypeScript 支持等几个方面出发，讨论了框架设计者在设计框架时应该考虑的内容。
   • Vue.js 3 的设计思路：从全局视角介绍 Vue.js 3.0 的设计思路，以及各个模块之间是如何协作的。

2. 响应系统

   • 响应系统的作用与实现：从宏观视角讲述了 Vue.js 3.0 中响应系统的实现机制。从副作用函数开始，逐步实现一个完善的响应系统，还讲述了计算属性和 watch 的实现原理，同时讨论了在实现响应系统的过程中所遇到的问题，以及相应的解决方案。
   • 非原始值的响应式方案：从 ECMAScript 规范入手，从最基本的 Proxy、Reflect 以及 JavaScript 对象的工作原理开始，逐步讨论了使用 Proxy 代理 JavaScript 对象的方式。
   • 原始值的响应式方案：主要讨论了 ref 的概念，并基于 ref 实现原始值的响应式方案，还讨论了如何使用 ref 解决响应丢失问题。

3. 渲染器

   • 渲染器的设计：主要讨论了渲染器与响应系统的关系，讲述了两者如何配合工作完成页面更新，还讨论了渲染器中的一些基本名词和概念，以及自定义渲染器的实现与应用。
   • 挂载与更新：主要讨论了渲染器挂载与更新的实现原理，其中包括子节点的处理、属性的处理和事件的处理。当挂载或更新组件类型的虚拟节点时，还要考虑组件生命周期函数的处理等。
   • 简单 Diff 算法：主要讨论了“简单 Diff 算法”的工作原理。
   • 双端 Diff 算法：主要讨论了“双端 Diff 算法”的工作原理。
   • 快速 Diff 算法：主要讨论了“双端 Diff 算法”的工作原理。

4. 组件化

   • 组件的实现原理：主要讨论了组件的实现原理，介绍了组件自身状态的初始化，以及由自身状态变化引起的组件自更新，还介绍了组件的外部状态（props）、由外部状态变化引起的被动更新，以及组件事件和插槽的实现原理。
   • 异步组件与函数式组件：主要介绍了异步组件和函数式组件的工作机制和实现原理。对于异步组件，我们还讨论了超时与错误处理、延迟展示 Loading 组件、加载重试等内容。
   • 内建组件和模块：主要介绍了 Vue.js 内建的三个组件的实现原理，即 KeepAlive、Teleport 和 Transition 组件。

5. 编译器

   • 编译器核心技术概览：首先讨论了 Vue.js 模板编译器的工作流程，接着讨论了 parser 的实现原理与状态机，以及 AST 的转换与插件化架构，最后讨论了生成渲染函数代码的具体实现。
   • 解析器：主要讨论了如何实现一个符合 WHATWG 组织的 HTML 解析规范的解析器，内容涵盖解析器的文本模式、文本模式对解析器的影响，以及如何使用递归下降算法构造模板 AST。在解析文本内容时，我们还讨论了如何根据规范解码字符引用。
   • 编译优化：主要讨论了 Vue.js 3.0 中模板编译优化的相关内容。具体包括：Block 树的更新机制、动态节点的收集、静态提升、预字符串化、缓存内联事件处理函数、v-once 等优化机制。

6. 服务端渲染

   • 同构渲染：主要讨论了 Vue.js 同构渲染的原理。首先探讨了 CSR、SSR 以及同构渲染等方案各自的优缺点，然后探讨了 Vue.js 进行服务端渲染和客户端激活的原理，最后总结了编写同构代码时的注意事项。

观后感

ing...