Vue3源码阅读(一)概览

源码（Vue3.2）

• 目录结构

├── .circleci // CI 配置目录
├── .ls-lint.yml // 文件命名规范
├── .prettierrc // 代码格式化 prettier 的配置文件
├── CHANGELOG.md  // 更新日志
├── LICENSE
├── README.md
├── api-extractor.json // TypeScript 的API提取和分析工具
├── jest.config.js  //  测试框架 jest 的配置文件
├── node_modules
├── package-lock.json
├── package.json
├── packages // Vue源代码目录
├── rollup.config.js  // 模块打包器 rollup 的配置文件
├── scripts
├── test-dts // TypeScript 声明文件
├── tsconfig.json // TypeScript 配置文件
└── yarn.lock

• 核心(package下)

├── compiler-core // 顾名思义，核心中的核心，抽象语法树和渲染桥接实现,与平台无关的编译器核心。包括编译器的可扩展基础和所有与平台无关的插件。
├── compiler-dom // Dom的实现
├── compiler-sfc // Vue单文件组件(.vue)的实现
├── compiler-ssr // 生成针对服务器端渲染优化的渲染函数的编译器。
├── global.d.ts
├── reactivity  // 响应式系统的实现,Composition API 的核心
├── runtime-core // 与平台无关的运行时核心。专门用于自定义 renderer
├── runtime-dom // 针对浏览器的运行时。包括原生 DOM API、属性、属性、事件处理程序等的处理,主要功能是适配了浏览器环境下节点和节点属性的增删改查。
├── runtime-test // 用对象来表示 DOM 树，方便测试
├── server-renderer // 服务端渲染实现
├── shared  // package 之间共享的工具库,内部实用函数和常量共享
├── size-check // 私有包，用于检查 tree-shaking 后的运行时大小
├── template-explorer // 用于调试编译器输出的开发工具
└── vue  //面向公众的“完整构建”，包括运行时和编译器。主入口

• compile 理解为程序编绎时，是指我们写好的源代码在被编译成为目标文件这段时间，但我们可以通俗的看成是我们写好的源代码在被转换成为最终可执行的文件这段时间，在这里可以理解为我们将.vue文件编绎成浏览器能识别的.html文件的一些工作
• runtime 可以理解为程序运行时，即是程序被编译了之后，打开程序并运行它直到程序关闭的这段时间的系列处理
• 模块关系图

                                    +---------------------+
                                    |                     |
                                    |  @vue/compiler-sfc  |
                                    |                     |
                                    +-----+--------+------+
                                          |        |
                                          v        v
                      +---------------------+    +----------------------+
                      |                     |    |                      |
        +------------>|  @vue/compiler-dom  +--->|  @vue/compiler-core  |
        |             |                     |    |                      |
   +----+----+        +---------------------+    +----------------------+
   |         |
   |   vue   |
   |         |
   +----+----+        +---------------------+    +----------------------+    +-------------------+
        |             |                     |    |                      |    |                   |
        +------------>|  @vue/runtime-dom   +--->|  @vue/runtime-core   +--->|  @vue/reactivity  |
                      |                     |    |                      |    |                   |
                      +---------------------+    +----------------------+    +-------------------+