前言

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 核心设计思想的同时，我们还能够间接掌握阅读和理解规范，并据此编写代码的方法。