vue3.0源码分析--vue-next-master目录结构

---

前言

我是木木，前端工作3年了，从小白一步步走过来，到现在也开始负责公司的架构了，从今天开始长期写博客，分享知识的同时希望和大家一起成长。

---

今后会逐渐开启专栏，分享react、vue、webgl、前端工程化等模块

一、vue-next-master 基本结构

链接: Vue 源码地址

我们将使用vue3.1.4版本进行深入全方位学习

进入源码目录执行 tree -aI “.git*|.vscode” -C -L 1 获取整个目录
vue-next-master目录结构：

├── 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运行时
├── sfc-playground //Vue 3 单文件组件在线 playground
├── server-renderer // 服务端渲染相关
├── shared // 共享的工具库
├── size-check // 测量代码体积的工具
├── template-explorer // 内部使用的编译文件浏览工具
├── vue-compat // vue3兼容相关
└── vue // vue3主入口文件，引入导出了运行时和编译器

Vue3的源码核心在于三大模块：compiler-module,renderer-module，reactivity-module。其中renderer-module包含三个阶段render parse，mount parse,patch parse。

二、Vue3的源码核心三大模块

新版Vue 3.0计划并已实现的主要架构改进和新功能：

编译器（Compiler）

• 介绍
  compile time 我们可以理解为程序编绎时，是指我们写好的源代码在被编译成为目标文件这段时间，但我们可以通俗的看成是我们写好的源代码在被转换成为最终可执行的文件这段时间，在这里可以理解为我们将.vue文件编绎成浏览器能识别的.html文件的一些工作，
• 内容
  compiler-core主要功能是暴露编译相关的API以及baseCompile方法
  compiler-dom基于compiler-core封装针对浏览器的compiler (对浏览器标签进行处理)
• 优点
  使用模块化架构
  优化 “Block tree”
  更激进的 static tree hoisting 功能 （检测静态语法，进行提升）
  支持 Source map
  内置标识符前缀（又名"stripWith"）
  内置整齐打印（pretty-printing）功能
  移除 Source map 和标识符前缀功能后，使用 Brotli 压缩的浏览器版本精简了大约10KB

运行时（Runtime）

• 介绍
  run time 可以理解为程序运行时，即是程序被编译了之后，打开程序并运行它直到程序关闭的这段时间的系列处理
• 内容
  runtime-core 虚拟 DOM 渲染器、Vue 组件和 Vue 的各种API
  runtime-test将DOM结构格式化成对象，方便测试
  runtime-dom 基于runtime-core编写的浏览器的runtime (增加了节点的增删改查，样式处理等)，返回render、createApp方法
• 优点
  速度显著提升
  同时支持 Composition API 和 Options API，以及 typings
  基于 Proxy 实现的数据变更检测
  支持 Fragments (允许组件有从多个根结点)
  支持 Portals (允许在DOM的其它位置进行渲染)
  支持 Suspense w/ async setup()

reactivity
单独的数据响应式系统，核心方法reactive、effect、 ref、computed

vue 整合 compiler + runtime

---

三、模块关系图

                      +---------------------+    +----------------------+
                      |                     |    |                      |
        +------------>|  @vue/compiler-dom  +--->|  @vue/compiler-core  |
        |             |                     |    |                      |
   +----+----+        +---------------------+    +----------------------+
   |         |
   |   vue   |
   |         |
   +----+----+        +---------------------+    +----------------------+    +-------------------+
        |             |                     |    |                      |    |                   |
        +------------>|  @vue/runtime-dom   +--->|  @vue/runtime-core   +--->|  @vue/reactivity  |
                      |                     |    |                      |    |                   |
                      +---------------------+    +----------------------+    +-------------------+

总结

个人觉得vue在逐渐react化，初步对比react17的源码以及vue3.0的代码后发现有很多异曲同工之处，尤大借鉴了react hook的想法，但是规避了一些react的问题。

我们将在后续的博客中介绍vue3大模块 ：compiler-module,renderer-module，reactivity-module