本文旨在帮助读者朋友了了解 VUE3 源码 的基本结构，以及VUE3在运行时做了哪些操作，以及为什么要做这些操作。以及基本的源码目录分析,对开发 VUE 特定分支版本给出一些简单的看法， 文章篇长有限只挑重点的说下
跟着目录开 先分析 package.json 中的 script
以下json 就是 script 中所有的代码了 挑出了一小部分注释了通过以下代码可以看出 vue3 对 script 编译做出了单独的处理，也可以集中处理
"dev": "node scripts/dev.js",// 开发整个编译运行时的
"build": "node scripts/build.js", // 打包 VUE 文件发布特定更新的版本
"clean": "rimraf packages/*/dist temp .eslintcache", // 清除 vite 的缓存文件
"dev-esm": "node scripts/dev.js -if esm-bundler-runtime",// 开发运行时的代码
"dev-compiler": "run-p \"dev template-explorer\" serve",// 开发编译器
"dev-sfc": "run-s dev-sfc-prepare dev-sfc-run",// 开发 单文件 编译器
"dev-sfc-prepare": "node scripts/pre-dev-sfc.js || npm run build-all-cjs", // 开发预编译
"dev-sfc-serve": "vite packages-private/sfc-playground --host",// 开发服务端部分
"dev-sfc-run": "run-p \"dev compiler-sfc -f esm-browser\" \"dev vue -if esm-bundler-runtime\" \"dev vue -ipf esm-browser-runtime\" \"dev server-renderer -if esm-bundler\" dev-sfc-serve",// 开发运行时部分
VUE3 的核心文件在packages 里面
compiler-core 文件 下核心编译器 核心编译器中有主要有对DOM的基本指令编译的代码，例如下列列表
- for 循环
- IF 操作
- 语句 编译 等等
在了解更多之前选了解下 VUE 的编译原理 VUE的编译原理是通过将模版文件 进行 AST 转换 再将 AST 编译成对面的渲染函数如下图所示
compiler-dom 文件 就是 DOM 编译器 DOM 编译器编译了 DOM 相当的内容 例：事件，html转码，以及绑定
- 事件就是 DOM 事件
- 转码就是将HTML中的某些特定字符进行转换例 <script> 这是一个普通字符但是HTML会将其识别为标签，而转码之后就不会被识别为标签 将 < 转为 "& lt;"
- 绑定就是各种输入框的绑定
compiler-sfc 文件 就是 sfc 文件编译器 主要由三个内容组成 template style script 三个编译组成
- template 编译 template 标签的内容
- style 编译 style 标签的内容
- script 编译 script 标签的内容
通过这个文件调用核心编译器来处理指令类的内容
compiler-ssr 文件 就是 ssr 编译器 这个就是 ssr 编译的文件 主要编译了哪些
- 例如指令，ssr 中 if 指定指定了哪些需要渲染哪些不需要渲染，这与客户端有区别，客户端可以直接有DOM操作，而服务器端只能通过字符串操作
reactivity 文件 就是晌应式API 就说下最核心的 effect
- effect 是晌应式最核心的 API VUE所有的晌应实现都是通过这个API实现的
- 以下是一个最简单的示例 const testRef = ref(); effect(() => { document.title = testRef.value }); 这里面还是一些比较复杂的内容例如调度器，任务队列。
runtime-core 文件 就是运行时的核心代码，有下列内容
- VUE运行时的slot
- 悬挂等需要运行时才运行的代码
