Vue3源码解读之全局概览

目录结构

当我们开始阅读源码之前，我们先来看一眼整体的目录结构

├── packages // 源码
├── scripts // 脚本文件，用于存放配置文件，进行编译打包
├── test-dts // 测试文件
├── .prettierrc
├── api-extractor.json // TypeScript的API提取和分析工具
├── CHANGELOG.md
├── jest.config.js  // jest配置文件
├── package.json
├── LICENSE
├── README.md
├── rollup.config.js  // rollup配置文件
├── tsconfig.json
└── yarn.lock

现在就正式进入放置源码的文件夹packages

├── compiler-core // 编译核心
├── compiler-dom // 针对浏览器环境的编译模块，基于compiler-core
├── compiler-sfc // 用于编译(.vue)文件，学习过webpack的同学就比较熟悉了
├── compiler-ssr // 针对服务端渲染的编译模块，基于compiler-core
├── global.d.ts
├── reactivity // 响应式模块，可单独使用
├── runtime-core // 运行时核心
├── runtime-dom // 针对浏览器环境的运行时，基于runtime-core
├── runtime-test // 用于测试的轻量级y运行时
├── server-renderer // 服务端渲染相关
├── shared // 共享的工具库
├── size-check // 测量代码体积的工具
├── template-explorer // 内部使用的编译文件浏览工具
└── vue // vue3主入口文件，引入导出了运行时和编译器

整体工作流程

从packages中我们可以看到Vue3的源码核心在于三大部分，即compiler、runtime、reactivity

vue-mastery的官方视频是介绍成有三大模块compiler-module,renderer-module，reactivity-module，其中renderer-module包含三个阶段render parse，mount parse,patch parse。从一个.vue文件出发，会经过以下阶段：

• 编译器模块将视图模板编译成一个渲染函数
• 数据响应式模块将模板中使用到的数据对象变为为响应式对象
• 渲染模块开始进入渲染阶段(render phase)，调用刚刚生成的渲染函数，观察响应式数据对象的变化，并返回一个虚拟的DOM节点
• 然后在挂载阶段(mount phase)，调用mount函数，使用虚拟DOM节点来创建web页面
• 当观察的响应式对象发生变化时，渲染模块会再次调用渲染函数创建一个新的虚拟DOM节点，然后发送到patch函数中，进行DOM diff，然后更新视图