1. 前言
从vue3 正式发版开始,到目前为止一直在使用vue3 进行项目开发, 中间也陆陆续续在源码中看些API的实现. 但一直未去整理自己的笔记, 所有的笔记看上去就很杂乱, 正好乘着这段时间项目不忙,对源码分析笔记做一个规整.
至于为什么学源码啊, vue3 设计目的啊, 和vue2 的区别, 网上一堆,我就不过多阐述了.
2. vue源码
Vue 3 的源代码存放在其 Github 官方仓库上,地址:https://github.com/vuejs/core
拉取源码到本地后, 执行pnpm 指令安装依赖
3. 目录结构
3.1 源码目录
Vue 源码的目录结构比较清晰, 除了项目架构的配置文件,最主要的两个目录:
- package: 源码目录,Vue3的源码都放在这里
-
scripts: Vue3的脚本文件, 用来存放配置文件,进行编译和打包
目录结构.png
整个项目结构中, 我们主要分析源码, 至于其他的配置文件不是我们分析的重点, 有兴趣可以研究一下源码项目配置
而所有的目录中最核心的就是packages 目录 Vue3 的源码存放在此目录种：
- compiler-core: 编译解析核心,与具体环境无关,主要生成AST, 并根据AST生成render()方法
- compiler-dom: 浏览器环境中模板解析逻辑, 如处理HTML转义, 处理v-model等指令
- compiler-sfc: 负责解析Vue单文件组件
- compiler-ssr: 服务端渲染环境中的模板解析逻辑
- reactivity: 响应式数据相关逻辑,Proxy 就在这里面
- runtime-core: 运行时与创建实例相关代码
- runtime-dom: 浏览器环境中的运行时核心
- runtime-test: 内部测试代码
- server-renderer: 用于SSR服务端渲染的逻辑
- shared: Vue3 工具库，一些通用方法
- size-check: 用于测试tree shaking 后代码大小的示例库
- template-explorer: 用于检查模板编译后的输出, 主要用于开发调试
- vue: Vue3 主入口文件,包括运行时和 编译器
3.2 最重要源码模块
通过目录名称我们可以看到package中最重要的模块有5个, 分别为
- compiler-core
- compiler-dom
- runtime-core
- runtime-dome
- reactivity
模块结构如下:
+---------------------+ +----------------------+
| | | |
+------------>| @vue/compiler-dom +--->| @vue/compiler-core |
| | | | |
+----+----+ +---------------------+ +----------------------+
| |
| vue |
| |
+----+----+ +---------------------+ +----------------------+ +-------------------+
| | | | | | |
+------------>| @vue/runtime-dom +--->| @vue/runtime-core +--->| @vue/reactivity |
| | | | | |
+---------------------+ +----------------------+ +-------------------+
而这5个大模块则是vue 最为重要的三大核心
4. vue3 源码三大核心系统
4.1 源码的三大核心系统
vue的源码包含三大核心系统
- Reactivity模块: 响应式系统, 主要职责是监听响应式数据
- Runtime模块: 也可以称之为Render模块, 真正负责渲染的模块, 主要职责就是将虚拟节点渲染成真实的元素,然后显示在浏览器上
- Compiler模块: 编译模块系统, 主要职责就是将template模板解析,生成render方法
三大系统对应的源码目录
三大核心系统目录结构.png
而三大系统中渲染系统 + 响应式系统 就是我们在官网上看到的运行时runtime代码
4.2 三大核心系统的协同工作
vue3三大系统工作原理.png
5. 编译调试
5.1 打包源码
根据package.json文件中的脚本命令
package.json.png
这里这么多命令, 我们开始只需要了解两个dev和build
- dev: 实施编译, 当你修改vue源码时, 会实时打包
- build: 将vue源码打包存放在dist目录下
这另个打包都是通过node运行scripts目录下对应的打包文件进行打包, 有兴趣的可以去详细分析一下vue 打包脚本
通过pnpm运行打包命令
pnpm run build
打包完成以后在packages/vue目录下生成dist目录, 目录中针对不同的模块化打包成不同的文件
打包目录.png
此时我们就可以编写测试文件
5.2 编写测试文件
在packages/vue/example目录为vue提供了很多示例页面, 每个页面都引入Vue构建后的文件./packages/vue/dist/vue.global.js
我们可以在此目录下编写的测试页面:package/vue/example/hello.html
实例代码:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<!-- 引入打包后的文件 -->
<script src="../dist/vue.global.js"></script>
</head>
<body>
<!-- vue 挂载节点 -->
<div id="app">
<div>{{name}}</div>
</div>
<script>
// 解构需要使用的API
const { reactive, createApp, ref } = Vue
// 创建vue 应用
createApp({
setup() {
// 通过ref 生成响应式数据
const name = ref('张三')
// 两秒后修改响应式数据
setTimeout(() => {
name.value = '李四'
}, 2000)
return { name }
}
}).mount('#app')
</script>
</body>
</html>
5.3 调试Vue源码
在浏览器中运行测试 文件, F12打开开发工具, 在源代码栏找到测试文件打上断点
断点测试.png
此时刷新页面, 浏览器就会在断点位置停止运行, 我们可以手动点击下一步进入源码调试了
单步调试.png
进入vue源码后,就可以看到refAPI, 接收一个字符串参数"张三", 并返回调用createRef(value,false)结果
源码调试.png
6. 总结
至此我们已经完成了源码分析的第一步,在此过程中:
- 首先我们在github拉取vue源码
- 其次我们简单了解了vue源码目录结构
- 最后我们通过源码编写测试实例, 断点测试时,成功进入源码API
接下来我们对于源码分析按照响应式系统reactivity,渲染系统runtime,编译系统compile顺序分析
网友评论