VUE源码学习

索引规划

Vue2源码

V2版本：“Vue version”: "2.6.14"

1. 生命周期

2. 虚拟DOM

3. 响应式原理：响应式原理：从数据侦听、依赖收集到触发更新 传送门

4. 编译

5. API

• nexttick：nextTick 实现原理 传送门

VUE2源码整体目录结构

Vue2 源码的架构：

├─.circleci
├─.github 
├─benchmarks
├─dist
├─examples
├─flow
├─packages
├─scripts
├─src
├─test
└─types

源码的核心重点在src目录，整个结构如下：

├─compiler
├─core
├─platforms
├─server
├─sfc
└─shared

Vue3源码

V3版本：“Vue version”: "3.2.22"

1. Vue3初始化：Vue3在CreateApp时，做了什么？传送门

2. “虚拟节点”的生成

3. 响应式系统 【Vue3源码学习】响应式源码解析 传送门

4. 编译

5. API

• nexttick：nextTick 实现原理 传送门

VUE3源码整体目录结构

Vue3 源码的架构：

├── .circleci // CI 配置目录
├── .ls-lint.yml // 文件命名规范
├── .prettierrc // 代码格式化 prettier 的配置文件
├── CHANGELOG.md  // 更新日志
├── LICENSE
├── README.md
├── api-extractor.json // TypeScript 的API提取和分析工具
├── jest.config.js  //  测试框架 jest 的配置文件
├── node_modules
├── package-lock.json
├── package.json
├── packages // Vue源代码目录
├── rollup.config.js  // 模块打包器 rollup 的配置文件
├── scripts
├── test-dts // TypeScript 声明文件
├── tsconfig.json // TypeScript 配置文件
└── yarn.lock

源码的核心重点在package目录，整个结构如下：

.
├── compiler-core // 顾名思义，核心中的核心，抽象语法树和渲染桥接实现
├── compiler-dom // Dom的实现
├── compiler-sfc // Vue单文件组件(.vue)的实现
├── compiler-ssr
├── global.d.ts
├── reactivity
├── runtime-core
├── runtime-dom
├── runtime-test
├── server-renderer // 服务端渲染实现
├── shared  // package 之间共享的工具库
├── size-check
├── template-explorer
└── vue