Vue3核心源码解析 (一) : 源码目录结构

通过软件框架阅读源码可以对框架本身运行机制进行学习,更能了解框架的API设计、原理及流程、设计思路;我们要知其然,更知其所以然。
Vue 3的源码相对于Vue 2版本有了较大程度的改变,采用Monorepo规范的目录结构,同时使用TypeScript作为开发语言(vue2在2022年4月底也更换TypeScript为开发语言 ),并添加了很多新的特性和优化。

1. 下载&启动Vue3源码

2023-03-31最新版本为V3.3.0-alpha.5

bash复制代码git clone https://github.com/vuejs/core.git

下载完成后进入core文件夹,由于vue3源码采用Yarn构建,我们还要先安装下Yarn

npm i yarn -g

然后安装相关依赖

yarn --ignore-scripts

可用npm run dev 开启源码调试模式,完整的源代码目录结构如下图

Vue3核心源码解析 (一) : 源码目录结构_第1张图片

core
├─ packages
│  ├─ compiler-core   // 核心编译器
│  ├─ compiler-dom    // dom编译器
│  ├─ compiler-sfc    // vue单文件编译器
│  ├─ compiler-ssr    // 服务端渲染编译
│  ├─ dts-test  //测试Typescript类型以确保类型保持为预期类型
│  ├─ global.d.ts  // TypeScript声明文件
│  ├─ reactivity  // 响应式模式,可以和其它框架配合使用
│  ├─ reactivity-transform  // 该功能现在被标记为不推荐使用,并将从Vue核心中删除,提案已经被放弃。
│  ├─ runtime-core // 运行时核心实例相关代码
│  ├─ runtime-dom  // 运行时dom相关API、属性、事件处理  
│  ├─ runtime-test  // 运行时测试相关代码
│  ├─ server-renderer // 服务器渲染
│  ├─ sfc-playground // 单文件组件在线调试器
│  ├─ shared // 内部工具库,不对外暴露
│  ├─ size-check // 测试代码体积
│  ├─ template-explorer // 用于调试编译器输出的开发工具
│  ├─ vue //面向公众的完整版本,包含运行时和编译器
│  └─ vue-compat //是Vue 3的一个构建,它提供了可配置的Vue 2兼容行为。

2. 目录模块

compiler-core、compiler-dom、runtime-core、runtime-dom这几个模块比较重要。
compile:可以理解为程序编译时,是指我们写好的源代码在被编译成为目标文件这段时间,在这里可以理解为我们将.vue文件编译成浏览器能识别的.js文件的一些工作。
runtime:可以理解为程序运行时,即程序被编译了之后,在浏览器打开程序并运行它,直到程序关闭的这段时间的系列处理。
reactivity目录也比较重要,它是响应式模块的源码,由于Vue 3整体源码采用的是Monorepo(单体仓库)规范,因此其下面每个子模块都可以独立编译和打包,从而独立对外提供服务,在使用时采用require(‘@vue/reactivity’)引入,进入reactivity目录下可以看到有对应的package.json文件。

3. 构建版本

可以通过以下命令进行构建,构建出Vue 3所有的版本

npm run build

构建好的文件在目录: core\packages\vue\dist ,说明如下:

// cjs(用于服务端渲染)
vue.cjs.js
vue.cjs.prod.js(生产版,代码进行了压缩)

// global(用于浏览器
                    
                    

你可能感兴趣的:(前端,前端)