前言
霍春阳（HcySunYang）
讲述：Alloy大小：2.44M时长：10:39
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 内建组件的原理；
服务端渲染、客户端渲染、同构渲染之间的差异，以及同构渲染的原理。
本书结构
本书分为 6 篇，共 18 章，各章的简介如下。
第一篇（框架设计概览）：共 3 章。
第 1 章主要讨论了命令式和声明式这两种范式的差异，以及二者对框架设计的影响，还讨论了虚拟 DOM 的性能状况，最后介绍了运行时和编译时的相关知识，并介绍了 Vue.js 3.0 是一个运行时 + 编译时的框架。
第 2 章主要从用户的开发体验、控制框架代码的体积、Tree-Shaking 的工作机制、框架产物、特性开关、错误处理、TypeScript 支持等几个方面出发，讨论了框架设计者在设计框架时应该考虑的内容。
第 3 章从全局视角介绍 Vue.js 3.0 的设计思路，以及各个模块之间是如何协作的。
第二篇（响应系统）：共 3 章。
第 4 章从宏观视角讲述了 Vue.js 3.0 中响应系统的实现机制。从副作用函数开始，逐步实现一个完善的响应系统，还讲述了计算属性和 watch 的实现原理，同时讨论了在实现响应系统的过程中所遇到的问题，以及相应的解决方案。
第 5 章从 ECMAScript 规范入手，从最基本的 Proxy、Reflect 以及 JavaScript 对象的工作原理开始，逐步讨论了使用 Proxy 代理 JavaScript 对象的方式。
第 6 章主要讨论了 ref 的概念，并基于 ref 实现原始值的响应式方案，还讨论了如何使用 ref 解决响应丢失问题。
第三篇（渲染器）：共 5 章。
第 7 章主要讨论了渲染器与响应系统的关系，讲述了两者如何配合工作完成页面更新，还讨论了渲染器中的一些基本名词和概念，以及自定义渲染器的实现与应用。
第 8 章主要讨论了渲染器挂载与更新的实现原理，其中包括子节点的处理、属性的处理和事件的处理。当挂载或更新组件类型的虚拟节点时，还要考虑组件生命周期函数的处理等。
第 9 章主要讨论了“简单 Diff 算法”的工作原理。
第 10 章主要讨论了“双端 Diff 算法”的工作原理。
第 11 章主要讨论了“快速 Diff 算法”的工作原理。
第四篇（组件化）：共 3 章。
第 12 章主要讨论了组件的实现原理，介绍了组件自身状态的初始化，以及由自身状态变化引起的组件自更新，还介绍了组件的外部状态（props）、由外部状态变化引起的被动更新，以及组件事件和插槽的实现原理。
第 13 章主要介绍了异步组件和函数式组件的工作机制和实现原理。对于异步组件，我们还讨论了超时与错误处理、延迟展示 Loading 组件、加载重试等内容。
第 14 章主要介绍了 Vue.js 内建的三个组件的实现原理，即 KeepAlive、Teleport 和 Transition 组件。
第五篇（编译器）：共 3 章。
第 15 章首先讨论了 Vue.js 模板编译器的工作流程，接着讨论了 parser 的实现原理与状态机，以及 AST 的转换与插件化架构，最后讨论了生成渲染函数代码的具体实现。
第 16 章主要讨论了如何实现一个符合 WHATWG 组织的 HTML 解析规范的解析器，内容涵盖解析器的文本模式、文本模式对解析器的影响，以及如何使用递归下降算法构造模板 AST。在解析文本内容时，我们还讨论了如何根据规范解码字符引用。
第 17 章主要讨论了 Vue.js 3.0 中模板编译优化的相关内容。具体包括：Block 树的更新机制、动态节点的收集、静态提升、预字符串化、缓存内联事件处理函数、v-once 等优化机制。
第六篇（服务端渲染）：1 章。
第 18 章主要讨论了 Vue.js 同构渲染的原理。首先探讨了 CSR、SSR 以及同构渲染等方案各自的优缺点，然后探讨了 Vue.js 进行服务端渲染和客户端激活的原理，最后总结了编写同构代码时的注意事项。
源代码及勘误
在学习本书时，书中所有代码均可通过手敲进行试验和学习，你也可以从 GitHub（HcySunYang）下载所有源代码。我将尽最大努力确保正文和源代码无误。但金无足赤，书中难免存在一些错误。如果读者发现任何错误，包括但不限于别字、代码片段、描述有误等，请及时反馈给我。本书勘误请至 GitHub（HcySunYang）查看或提交。
致谢
这本书的诞生，要感谢很多与之有直接或间接关系的人和物。下面的致谢不分先后，仅按照我特定的逻辑顺序组织编写。
首先要感谢 Vue.js 这个框架。毫无疑问，Vue.js 为世界创造了价值，无数的企业和个人开发者从中受益。当然，更要感谢 Vue.js 的作者尤雨溪以及 Vue.js 团队的其他所有成员，良好的团队运作使得 Vue.js 能够持续发展。没有 Vue.js 就不可能有今天这本书。
除此之外，我还要感谢裕波老师的引荐和王军花老师的信任，使得我有机会来完成这样一本自己比较擅长的书。在写书的过程中，王军花老师全程热心细致的工作让我对完成编写任务的信心得到了极大的提升。再次向裕波老师和王军花老师表示由衷的感谢，非常感谢。
还要感谢曾经共事过的一位朋友，张啸。他为这本书提出了很多宝贵意见，同时还细心地帮忙检查错别字和语句的表达问题。
感谢罗勇林，这是我另一位很特殊的朋友。可以说，没有他，我甚至不可能走上程序员的道路，更不可能写出这样一本书。感谢你，兄弟。
当然了，我还要感谢刚刚和我成为合法夫妻的爱人。在我写书的时候，她还是我的女朋友，为了顺利地完成这本书和一些其他原因，我几乎在家全职写作，期间只有少量收入甚至没有收入。她从来没有抱怨过，还经常鼓励我，我还总开玩笑地对她说：“不然你养我算了。”当这本书出版的时候，她已经成为我的合法妻子，这本书也是我送给她的礼物之一，谢谢你。
公开
同步至部落
取消
完成
0/2000
荧光笔
直线
曲线笔记
复制
AI
- 深入了解
- 翻译
- 解释
- 总结
Vue.js 3.0 作为前端框架的新版本，带来了许多新特性和创新，使其成为一个非常成功的项目。相比 Vue.js 2，Vue.js 3.0 使用更少的代码实现更多功能，模块之间的耦合度低，扩展能力强大。本书旨在帮助读者深入理解 Vue.js 3.0 的核心设计思想，从规范出发，实现功能完善且严谨的 Vue.js 功能模块。内容包括框架设计的核心要素、虚拟 DOM 的 Diff 算法、组件化实现、渲染器、编译器以及服务端渲染等内容。读者对象包括对 Vue.js 2/3 有经验的开发人员和对 Vue.js 框架设计感兴趣的前端开发人员。本书分为 6 篇，共 18 章，涵盖了框架设计概览、响应系统、渲染器、组件化、编译器和服务端渲染等内容。通过深入理解 Vue.js 3.0 的核心设计思想，读者不仅能够更从容地面对复杂问题，还能够指导在其他领域进行架构设计。Vue.js 3.0 的出现为前端开发带来了更多可能性，为读者提供了深入学习和应用的机会，同时也为技术领域的发展注入了新的活力。
2024-01-04给文章提建议
仅可试看部分内容，如需阅读全部内容，请付费购买文章所属专栏
《Vue.js 设计与实现》
《Vue.js 设计与实现》
立即购买
登录 后留言
全部留言(1)
- 最新
- 精选
escray
确实是一本好书，结合极客时间的《Vue 3 企业级项目实战课》一起服用，效果更好2024-01-10归属地：江苏
收起评论
[1]：或访问图灵社区本书主页下载。——编者注
[2]：也可访问图灵社区本书主页查看或提交勘误。——编者注