跳到主要内容

目录

2023年03月04日
柏拉文
越努力，越幸运

一、认识​

Vue3 核心源码可以分为三大模块:

  • 响应性reactivity

  • 编译器compiler

  • 运行时runtime

二、目录​

Vue.js 的源码都在 packages 目录下，其目录结构如下

packages
├── compiler-core  // 编译器核心代码
├── compiler-dom   // 浏览器相关的编译模块
├── compiler-sfc   // 单文件组件（.vue）的编译模块
├── compiler-ssr   // 服务端渲染的编译模块
├── dts-test  
├── reactivity     // 响应性的核心模块
├── reactivity-transform  //  已过期，无需关注
├── runtime-core   // 运行时的核心代码，内部针对不同平台进行了实现
├── runtime-dom    // 基于浏览器平台的运行时
├── runtime-test   // runtime 测试相关
├── server-renderer  // 服务端渲染
├── sfc-playground   // sfc 工具
├── shared         // 共享的工具类
├── size-check     // 测试运行时包大小
├── template-explorer  
├── vue  
├── vue-compat   // 用于兼容 Vue2 的代码
| └──  codegen
│     └──  directives

三、细节​

3.1 compiler-core​

3.2 compiler-dom​

3.3 compiler-sfc​

3.4 compiler-ssr​

3.5 dts-test​

3.6 reactivity​

3.7 reactivity-transform​

3.8 runtime-core​

3.9 runtime-dom​

runtime-dom 是浏览器相关的编译模块，之所以将浏览器相关的拆分出来，是因为 Vue 针对不同的环境有着不同的渲染处理。因此 compiler-core 只保留渲染核心逻辑，其他逻辑由各自文件夹实现，针对不同环境，调用不同的渲染 API。