Vue2.6.x源码阅读 - 2.目录结构分析

简析Vue源码中根目录，以及核心代码/src目录下的代码文件夹构成与功能。

目录结构

根目录

• benchmarks: 复杂情况下的Vue样例，如大量数据表格、服务端渲染(ssr)、渲染大量svg图片。

• dist: 构建后文件的输出目录，如vue.js、vue.min.js。

• examples: Vue应用demo，统一引用了输出目录下的vue.min.js。

• flow: 类型声明，定义了源码中所使用的各种类型，包括VNode、GlobalAPI等，使用开源项目 Flow。

• packages: Vue相关的一些依赖，如Weex，可直接引入使用。

• scripts: 用于存放一些npm脚本，配合webpack与rollup等工具对源码进行编译、测试、构建打包等。上文增加的sourcemap配置就位于~/scripts/config.js中。

• src: Vue核心源码，学习的重点。

• test: 测试用例目录，包含了单元测试unit、e2e测试(用户真实场景)、服务端渲染(ssr)和weex的一些测试用例。通过yarn test执行。

• types： Vue2.6.x已经能够支持开发者使用typescript，该目录定义了typescript类型声明文件。

• 其他文件：

  • 代码规范配置文件： .editorconfig、.eslintrc.js、eslintignore

  • 类型检查配置文件: .flowonfig

核心源码

• compiler - 编译器

  1. Vue使用字符串使用的HTML模板(template)，编译器内做的主要工作就是解析该模版字符串。

  2. 解析模板字符串的算法就涉及到编译原理中的内容，包括词法解析、语法分析、抽象语法树(AST)生成、代码生成、代码优化等。将模板字符串转为对应的html与js代码，

  3. 解析过程中的代码优化部分有如生成静态dom子树(purely static sub-tree)，来提高Vue操作dom树时的性能。

• core - 核心代码

  • Vue构造函数、生命周期方法、虚拟Dom(Virtual DOM)、Vue实例(instance)方法、Vue全局API等核心代码。

• platform - 平台

  • 根据运行环境(平台设备)的不同，即Web(浏览器)平台与Weex(移动端)平台，Vue会在运行时进行区别处理。由于涉及到平台不同而进行不同的运行处理，所以很容易就能想到，Vue代码运行的入口也在platform当中。

• server - 服务端

  • Vue在服务端时的代码处理

• sfc：单文件组件(single file component)

  • Vue框架最简便的使用方式，就是引用vue.min.js后创建实例，并在实例内进行编写。涉及的都是.js文件。而当我们使用一些官方脚手架时(vue/cli)，会发现可以直接使用.vue文件进行编写，在.vue文件中，根据标签的不同即可编写html、js、css等代码。而这个解析工作就属于sfc，它内部仅含一个parser.js文件，即用于解析.vue文件。这也是为什么它叫做单文件组件，一个.vue文件，就自成一个Vue component。

• shared - 工具类方法

  • src源码中涉及的公共方法、公共常量(如生命周期常量)都来自于shared