序

在这本书问世之前，我就已经看过霍春阳的Vue.js 3源码解读，当时就很欣赏他对技术细节的专注和投入。后来春阳为Vue.js 3提交了大量补丁，修复了一些非常深层的渲染更新bug，为Vue.js 3做出了很多贡献，成为了官方团队成员。春阳对Vue.js 3源码的理解来自参与源码的维护中，这是深入理解开源项目最有难度但也最有效的途径。也因此，这本书对Vue.js 3技术细节的分析非常可靠，对于需要深入理解Vue.js 3的用户会有很大的帮助。

春阳对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 语法的模板解析器，并在此基础上实现一个支持插件架构的模板编译器。

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