vue3源码解析（v3.3.8）

从最基本的目录结构开始，逐渐深入，主要是为留痕，以便以后查阅

0 版本

版本：3.3.8

1 目录结构

├─changelogs		        // 更新日志
├─packages		        // 源码和测试代码
│  ├─compiler-core		// 跨平台的框架
│  ├─compiler-dom 		// 浏览器端编译器
│  ├─compiler-sfc 		// .vue 文件解析器
│  ├─compiler-ssr 	  	// 服务端解析器
│  ├─dts-test			// 
│  ├─reactivity			// 响应式系统的实现
│  ├─reactivity-transform       // 提供响应性语法糖，听说已经被移除了，但在最新的包里面还可以看见
│  ├─runtime-core 		// 包含虚拟 DOM 渲染器、组件实现、全局的js API。
│  ├─runtime-dom  		// 对 原生DOM API、属性、样式、事件等管理。
│  ├─runtime-test 		// 用于测试 runtime-core 的轻量级运行时，仅适用于vue内部测试
│  ├─server-renderer	        // 服务端渲染的核心实现
│  ├─sfc-playground		// 与 template-explorer 类似，不仅包含 template 部分的编译，还包含了 script 与 style 部分的编译。
│  ├─shared			// 包含多个包共享的内部实用工具库
│  ├─template-explorer    	// 用于调试模板编译输出工具。
│  ├─vue  		        // vue完整包
│  └─vue-compat			// vue3 的构建版本，提供可配置的 vue2兼容行为。
└─scripts 		        // 编译构建代码

1.1 目录解释

• compiler-core：  Vue.js 是一个跨平台的框架，既可以在浏览器端编译，也可以在服务器端编译。compiler-core 包含所有与平台无关的代码转换插件。
• compiler-dom：  在浏览器端编译时，会使用 compiler-dom 提供的编译器，它是在 compiler-core 的基础上进行的封装。compiler-dom 包含了专门针对浏览器的代码转换插件。
• compiler-sfc：  用于实现  .vue 文件的解析，以及 template、script、style 的解析的相关代码都是由 compiler-sfc 模块实现的。
• compiler-ssr：  在服务端编译时，会使用 compiler-ssr 提供的编译器。它是专门针对服务端渲染的转换插件。
• runtime-core：  包含了与平台无关的运行时核心实现（vue核心代码），包括 虚拟DOM的渲染器、组件实现和一些全局的 JS API。
• runtime-dom：  基于 runtime-core 创建的以浏览器为目标的运行时，包括对原生 DOM API、属性、样式、事件等管理。
• reactivity：  包含响应式系统的实现，是 runtime-core 包的依赖，也可以作为与框架无关的包独立使用。
• server-renderer：  包含服务端渲染的核心实现，是用户在使用 Vue.js 实现服务端渲染时所需要依赖的包。

1.2 构建版本

比较常见的是构建出来的Vue会有vue.global.js或者vue.runtime.global.js两种版本，他们分别表示：

• vue.global.js：是包含编译器和运行时的“完整”构建版本，因此它支持动态编译模板。
• vue.runtime.global.js：只包含运行时，并且需要在构建步骤期间预编译模板。

其中，如果需要在客户端上编译模板 (即：将字符串传递给template 选项，或者使用元素的DOM内HTML 作为模板挂载到元素)，将需要编译器，因此需要完整的构建版本，如下代码所示：

// 需要编译器
Vue.createApp({
  template: '<div>{{ hi }}</div>'
})

// 不需要
Vue.createApp({
  render() {
    return Vue.h('div', {}, this.hi)
  }
})

当使用Webpack的vue-loader时，*.vue 文件中的模板会在构建时预编译为JavaScript，在最终的捆绑包中并不需要编译器，因此可以只使用运行时构建版本。所以，如果直接在浏览器打开Vue的页面，可以直接采用<script>引入完整版本，如果采用构建工具例如Webpack进行构建，则可以使用import引入运行时版本，和构建相关的脚本源码都在scripts下面。例如，当我们需要构建出完整版时，可以在根目录执行，或者修改package.json的dev命令：

node scripts/dev.js -f global-runtime

当需要构建运行时版本，执行：

node scripts/dev.js -f global

具体的-f参数以及其他参数配置含义可以在rollup.config.js里面找到。
执行完成后在packages\vue\dist目录下可以得到对应的文件。所有Vue 3可构建出来的版本如下所示：

// cjs（用于服务端渲染）  
vue.cjs.js  
vue.cjs.prod.js（生产版，代码进行了压缩）  
  
// global（用于浏览器<script src="" />标签导入，导入之后会增加一个全局的Vue对象）  
vue.global.js  
vue.global.prod.js（生产版，代码进行了压缩）  
vue.runtime.global.js  
vue.runtime.global.prod.js（生产版，代码进行了压缩）  
  
// browser（用于支持ES6 Modules浏览器<script type="module" src=""/>标签导入）  
vue.esm-browser.js  
vue.esm-browser.prod.js（生产版，代码进行了压缩）  
vue.runtime.esm-browser.js  
vue.runtime.esm-browser.prod.js（生产版，代码进行了压缩）  
  
// bundler（这两个版本没有打包所有的代码，只会打包使用的代码，需要配合打包工具来使用，会让Vue体积更小）  
vue.esm-bundler.js  
bue.runtime.esm-bundler.js