5日凌晨，尤雨溪发布了Vue 3的源代码。

话不多说，我们趁热对Vue 3源代码做一些简要分析。

如果您没有阅读过Composition API RFC，您可能无法完全理解以下内容。

和睦相处

目前打包的代码是ES2015，不支持IE 11。

使用打字稿

目前，超过98%的代码是用TypeScript编写的。

如果您还没有学习TypeScript，请尽快学习，否则您可能无法理解源代码。

另一件可能会让你感到惊讶的事情是，Vue 3的源代码根本没有使用class关键字！(测试代码和示例代码中仅使用class关键字)

正式版本什么时候发布

目前，Vue 3处于Pre-Alpha版本。以后应该会有Alpha和Beta版本。

根据Vue的官方时间表，至少要到2020年第一季度才能发布3.0的正式版本。

阅读建议

强烈建议国庆假期阅读Vue 3的源代码，因为目前代码结构清晰，代码量相对较少。

下载代码后，可以使用yarn dev命令进行调试。(有人给出了详细的调试技巧)

关于阅读顺序，我的建议是

先读反应性，可以尽快了解Vue 3的新特性；再次阅读rumtime，了解组件的实现和生命周期；如果还有时间再读一遍编译器，了解编译优化过程。另外，如果想节省时间，可以直接查看__tests__目录下的所有测试用例，了解Vue 3的所有功能。目前只有不到700个测试用例。

代码结构

代码仓库中有一个packages目录，是Vue 3主要功能的实现，包括

反应性目录：一个数据响应系统，它是一个独立的系统，可以与任何框架一起使用。运行时核心目录：独立于平台的运行时。其功能包括虚拟DOM渲染器、Vue组件以及Vue的各种API。我们可以使用这个运行时来实现特定平台的高阶运行时，比如自定义渲染器。Runtime-dom目录：是浏览器的运行时。它的功能包括处理原生的DOM API、DOM事件和DOM属性。运行时测试目录：是一个专门为测试而编写的轻量级运行时。由于rumtime呈现的DOM树实际上是一个JS对象，所以这个运行时可以在所有JS环境中使用。您可以使用它来测试渲染是否正确。它还可以用来序列化DOM，触发DOM事件，并在更新中记录DOM操作。服务器渲染器目录：用于SSR。尚未实现。编译器核心目录：是一个平台无关的编译器，它既包含可扩展的基本功能，也包含所有平台无关的插件。编译器-dom目录：为浏览器编写的编译器。共享目录：不公开任何API，主要包含一些平台无关的内部帮助方法。vue目录：用于构建“完整构建”版本，它指的是上面提到的运行时和编译器。可以看出，新的Vue代码仓库是模块化的。接下来，让我们逐一看看每个模块公开的API。

@ vue/runtime-核心模块

大多数Vue开发人员不应该使用这个模块，因为它是专门用于定制渲染器的。

用法示例：

从“@ vue/runtime-core”const { render，createApp }=createRenderer({ path cprop，insert，remove，CreateElement，//.})//`render `是底层API//`createApp `将生成一个具有全局可配置上下文的应用实例导出{render，createapp}导出*自' @ vue/runtime-core ' @ vue/runtime-DOM模块

该模块是基于上述模块编写的浏览器上的运行时，其主要功能是适应浏览器环境中节点和节点属性的添加、删除和修改。它公开了两个重要的API:Render和createApp，并声明了一个ComponentPublicInstance接口。

导出{ render，createApp }//从核心//h，组件，反应性应用编程接口，下一个标记，标志类型导出*中重新导出所有内容从" @vue/runtime-core "导出接口组件公共实例{ $ El : Element } @ vue/runtime-test模块

这个模块的主要功能是用对象来表示数字正射影像图树，方便测试。并且提供了很多有用的应用程序接口方便测试：

导出{ render，createApp }//方便一次性渲染验证导出函数renderToString(Vnode : Vnode){ const root=node ops。createElement(' div ')呈现(VNode，根)返回serializeInner(root)}从“”导出* ./triggerEvent“从”导出* ./serialize“export * from ”./nodeOps'export * from ' ./Jestutils ' export * from ' @ vue/runtime-core ' @ vue/reaction模块

这是一个极其重要的模块，它是一个数据响应式系统。其暴露的主要应用程序接口有ref(数据容器)、反应性（基于代理实现的响应式数据)、计算的（计算数据)、效果（副作用)等几部分：

从""导出{ ref，isref，torefs，Ref，UnwrapRef } ./ref'export { reactive，isReactive，readonly，isReadonly，toRaw，markReadonly，markNonReactive} from ' ./被动”从导出{ computed，ComputedRef，WritableComputedRef，WritableComputedOptions} ./computed'export { effect，stop，pauseTracking，resumeTracking，ITERATE_KEY，ReactiveEffect，ReactiveEffectOptions，DebuggerEvent } from ' ./效果"从导出{锁定，解锁}"。/lock "从导出{操作类型} ./operations '很明显，这个模块就是合成应用编程接口的核心了，其中的裁判员和反应的应该重点掌握。

@ vue/编译器核心模块

这个编译器的暴露了大西洋时间和基础编译相关的原料药，它能把一个字符串变成一棵AST。

导出函数基本编译(模板：字符串| RootNode，选项：编译选项={ }): CodegenResult {//详情略.返回从“”生成(ast，options)}导出{ parse，ParserOptions，TextModes } ./parse'export { transform /*.*/}发件人/转换”从导出{生成，代码选项，代码生成上下文，代码生成结果} ./codegen "从导出{错误代码，编译器错误，创建编译器错误} ./errors'export * from ' ./ast ' @ vue/编译器表示“状态”模块

这个模块则基于上个模块，针对浏览器做了适配，如对文本区域和风格标签做了特殊处理。

@ vue/server-渲染器模块

目前这个模块没有实现任何功能。

某视频剪辑软件模块

这个模块就是简单的引入了运行时间和编译器：

从" @ vue/编译器多姆导入{编译，编译选项}从" @ vue/运行时多姆导入{ registerRuntimeCompiler，render function }函数compileToFunction(模板：字符串，选项？ compilerolopions): render函数{ const { code }=compile(模板，{ hoistStatic: true，选项})返回新的函数(代码)()作为渲染函数}注册运行时编译器(编译函数)导出{编译时的编译函数}从" @vue/runtime-dom "导出*以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。