Vue.js布道师匠心之作，Vue 3.0核心源码分析

1600+条注释，拆解核心源码，呈现框架源码的前因后果

代码细节、数据结构、算法妙用、设计思想，系统解读Vue.js

1.直击读者刚需，类型稀缺，本书是市面上较少的源码分析类图书。

2.内容丰富系统，覆盖 Vue.js 核心和常用的知识点，以及 3.0 的新特性。图书大纲设计符合读者循序渐进学习的思维方式，深入浅出，课程不仅会讲 how，还会讲 why，且通过核心源码拆解、流程图的方式辅助讲解，更易于读者学习。

3.可实践性强，读者通过课程学习，对 Vue.js 实现原理能有充分的认识，在工作中遇到 Vue.js 相关的 bug 可以快速定位，提升工作效率；也可以修炼内功，提升个人技术能力，进而提升个人在市场中的竞争力。

4.作者在前端圈内有很好的口碑，是“老黄的前端私房菜”的主理人，现zoom前端架构师，也是拉勾教育、慕课网讲师，他的课程在平台上销售过万，以其课程内容的优质质量著称，在前端圈有良好的口碑。

本书将带领读者阅读Vue.js 3.0 的源码，通过大量注释、流程图，呈现每部分源码的“前因后果”，帮助读者体会Vue.js 的设计思想。全书共七部分，分为24 章，作者结合实际用例，循序渐进地介绍了Vue.js的整体设计、组件、响应式原理、编译和优化、实用特性、内置组件、官方生态等内容。阅读本书不仅可以深入理解Vue.js 的内核实现，还能学到阅读源码的技巧，提高业务逻辑分析能力和代码重构能力。

本书面向有 Vue.js、React 或者 Angular 等框架的使用经验，对源码设计感兴趣，渴望在技术方面进一步成长的开发者。

这本书对 Vue.js 的源码进行了透彻的分析和解读，作者结合多年的 Vue.js 实践经验和慕课网授课经验，让读者深入地理解 Vue.js 的设计思想和技术实现原理，掌握源码分析技巧，提升技术能力。这是一本不可错过的好书，非常值得所有前端开发人员一读。
—— 李成斌
Zoom Web 开发部高级经理


有幸和黄轶老师共事过，黄轶老师对技术原理的追求让人印象深刻。作为 Vue.js 的布道师，黄轶老师深入浅出地从原理上分析了 Vue.js 的技术设计和实践，这本书定会让读者对 Vue.js 有更加深入的认识。
—— 张袁炜
抖音开放平台技术负责人

黄老师一直是 Vue.js 的布道者，不仅对 Vue.js 有大量的复杂应用实践经验，同时对其也有着非常深入的研究。这本书就是黄老师应用和研究 Vue.js 的精华，学完这本书，你不仅可以清晰、渐进式地掌握 Vue.js 的各种原理细节，更重要的是，还可以学到应用场景、前因后果、数据结构和算法妙用、设计思想，做到庖丁解牛般理解和应用 Vue.js。如果你对 Vue.js 感兴趣，想要借助 Vue.js 帮助自己快速成长，这本书不容错过。
—— 苗典
滴滴前端高级专家

《Vue.js 技术内幕》系统解读了 Vue.js 代码实现的方方面面。其实前端框架的代码未必有很多人想象中那么高深，如果你对 Vue.js 的工作机制有困惑，不妨带着问题在这本书的帮助下阅读源码，相信会有很大收获。
—— 王译锋（雪碧）
《JavaScript 二十年》译者，稿定科技前端开发工程师

目录
第 一部分 Vue．js 的整体设计
第 1章 Vue．js 3．x 的优化 2
1．1 源码优化 2
1．1．1 monorepo 2
1．1．2 TypeScript 3
1．2 性能优化 4
1．2．1 源码体积优化 4
1．2．2 数据劫持优化 5
1．2．3 编译优化 7
1．3 语法API 优化 9
1．3．1 优化逻辑组织 9
1．3．2 优化逻辑复用 12
1．4 引入RFC 14
1．5 总结 14
第 2章 Vue．js 3．x 源码总览 15
2．1 源码目录结构 15
2．2 不同构建版本Vue．js 的使用场景 18
2．2．1 Runtime-only 与 Runtime + Compiler 19
2．2．2 CDN 直接使用 19
2．2．3 配合打包工具使用 20
2．2．4 服务端渲染使用 20
2．3 编译构建 21
2．3．1 收集编译目标 21
2．3．2 并行编译 21
2．3．3 单个编译 22
2．4 rollup 配置 23
2．4．1 输入与输出 24
2．4．2 external 27
2．4．3 插件配置 28
2．5 总结 31
第二部分 组件
第3章 组件的渲染 34
3．1 什么是vnode 35
3．1．1 普通元素vnode 35
3．1．2 组件vnode 35
3．1．3 vnode 的优势 36
3．2 如何创建vnode 37
3．3 组件的挂载 41
3．3．1 设置副作用渲染函数 42
3．3．2 渲染组件生成subTree 43
3．3．3 subTree 的挂载 45
3．3．4 普通元素的挂载 46
3．3．5 组件的嵌套挂载 49
3．4 应用程序初始化 50
3．4．1 创建app 对象 50
3．4．2 重写app．mount 函数 52
3．4．3 执行mount 函数渲染应用 53
3．5 总结 54
第4章 组件的更新 55
4．1 渲染函数更新组件的过程 55
4．2 patch 流程 56
4．2．1 处理组件 58
4．2．2 处理普通元素 61
4．3 核心diff 算法 65
4．3．1 同步头部节点 66
4．3．2 同步尾部节点 67
4．3．3 添加新的节点 68
4．3．4 删除多余节点 69
4．3．5 处理未知子序列 71
4．3．6 移动子节点 73
4．3．7 建立索引图 74
4．3．8 更新和移除旧节点 75
4．3．9 移动和挂载新节点 78
4．3．10 最长递增子序列 80
4．4 总结 85
第5章 组件的实例 87
5．1 创建组件实例 87
5．2 设置组件实例 90
5．2．1 创建渲染上下文代理 92
5．2．2 上下文代理的优化 96
5．2．3 处理setup 函数 98
5．2．4 完成组件实例设置 103
5．2．5 兼容Options API 105
5．3 总结 107
第6章 组件的props 108
6．1 props 配置的标准化 109
6．2 props 值的初始化 112
6．2．1 设置props 113
6．2．2 验证props 117
6．2．3 响应式处理 119
6．3 props 的更新 120
6．3．1 触发子组件重新渲染 121
6．3．2 更新instance．props 121
6．3．3 把instance．props 变成响应式的 124
6．3．4 对象类型props 数据的更新 125
6．4 总结 128
第7章 组件的生命周期 129
7．1 注册钩子函数 130
7．2 onBeforeMount 和onMounted 132
7．3 onBeforeUpdate 和onUpdated 134
7．4 onBeforeUnmount 和onUnmounted 136
7．5 onErrorCaptured 137
7．6 总结 139
第8章 异步组件 140
8．1 defineAsyncComponent 141
8．1．1 渲染占位节点 143
8．1．2 加载异步JavaScript 模块 144
8．1．3 重新渲染组件 145
8．2 高级用法 145
8．2．1 Loading 组件 146
8．2．2 Error 组件 147
8．3 只加载一次 150
8．4 总结 152
第三部分 响应式原理
第9章 响应式的内部实现原理 154
9．1 响应式对象的实现差异 155
9．2 reactive API 157
9．3 依赖收集 160
9．4 派发通知 164
9．4．1 副作用函数 166
9．4．2 嵌套effect 的场景 168
9．4．3 cleanup 的设计 169
9．5 响应式实现的优化 171
9．5．1 依赖收集的优化 171
9．5．2 trackOpBit 的设计 176
9．6 ref API 177
9．6．1 ref API 的优化 178
9．6．2 unref 180
9．7 shallowReactive API 182
9．8 readonly API 183
9．9 总结 185
第 10章 计算属性 186
10．1 computed API 186
10．2 计算属性的运行机制 190
10．3 嵌套计算属性 193
10．4 总结 193
第 11章 侦听器 195
11．1 watch API 的用法 196
11．2 watch API 的实现原理 196
11．2．1 标准化source 197
11．2．2 创建job 200
11．2．3 创建scheduler 201
11．2．4 创建effect 202
11．2．5 返回销毁函数 203
11．3 异步任务队列的设计 204
11．3．1 异步任务队列的创建 205
11．3．2 异步任务队列的执行 208
11．3．3 检测循环更新 211
11．4 watchEffect API 212
11．5 注册无效回调函数 215
11．6 侦听器调试 216
11．7 总结 219
第四部分 编译和优化
第 12章 模板解析 222
12．1 生成AST 223
12．2 创建解析上下文 226
12．3 解析子节点 227
12．3．1 生成AST 节点数组 228
12．3．2 注释节点的解析 230
12．3．3 插值的解析 232
12．3．4 普通文本的解析 233
12．3．5 元素节点的解析 234
12．3．6 空白字符处理 238
12．4 创建AST 根节点 240
12．5 总结 240
第 13章 AST 转换 242
13．1 创建transform 上下文 244
13．2 遍历AST 节点 246
13．2．1 Element 节点转换函数 247
13．2．2 表达式节点转换函数 252
13．2．3 Text 节点转换函数 254
13．2．4 条件节点转换函数 258
13．3 静态提升 266
13．4 创建根节点的代码生成节点 270
13．5 总结 272
第 14章 生成代码 273
14．1 创建代码生成上下文 276
14．2 生成预设代码 278
14．3 生成渲染函数的名称和参数 282
14．4 生成资源声明代码 283
14．5 生成创建vnode 树的表达式 285
14．6 运行时优化 298
14．7 总结 302
第五部分 实用特性
第 15章 依赖注入 304
15．1 provide API 305
15．2 inject API 307
15．3 对比模块化共享数据的方式 308
15．4 依赖注入的缺陷和应用场景 309
15．5 总结 313
第 16章 插槽 314
16．1 插槽的用法 314
16．2 插槽的实现 317
16．2．1 父组件的渲染 317
16．2．2 子组件的渲染 320
16．2．3 作用域插槽 325
16．3 总结 327
第 17章 自定义指令 328
17．1 指令的定义 329
17．2 指令的注册 330
17．3 指令的应用 331
17．4 总结 337
第 18章 v-model 指令 338
18．1 普通表单元素 338
18．2 自定义组件 342
18．3 自定义事件派发 345
18．4 v-model 修饰符 346
18．4．1 默认修饰符 347
18．4．2 带参数的修饰符 348
18．5 总结 350
第六部分 内置组件
第 19章 Teleport 组件 352
19．1 Teleport 实现原理 354
19．1．1 组件创建 355
19．1．2 组件更新 357
19．1．3 组件移除 359
19．2 总结 360
第 20章 KeepAlive 组件 362
20．1 组件的渲染 364
20．2 缓存的设计 366
20．3 props 设计 369
20．4 组件的卸载 370
20．5 总结 372
第 21章 Transition 组件 373
21．1 Transition 组件的用法 373
21．2 组件的核心思想 376
21．3 组件的实现原理 377
21．3．1 组件的渲染 380
21．3．2 钩子函数的执行 381
21．3．3 模式的应用 389
21．4 总结 391
第 22章 TransitionGroup 组件 392
22．1 组件的实现原理 392
22．1．1 组件的渲染 395
22．1．2 move 过渡实现 396
22．2 总结 399
第七部分 官方生态
第 23章 Vue Router 402
23．1 路由的基本用法 402
23．2 路由的实现原理 404
23．2．1 路由对象的创建 404
23．2．2 路由的安装 404
23．2．3 路径的管理 406
23．2．4 路径和路由组件的渲染的映射 413
23．2．5 守卫函数的实现 422
23．2．6 完整的导航解析流程 426
23．3 总结 435
第 24章 Vuex 436
24．1 Vuex 是什么 436
24．1．1 什么是“状态管理模式” 436
24．1．2 Vuex 核心思想 438
24．2 Vuex 初始化 438
24．2．1 创建store 实例 439
24．2．2 初始化模块 440
24．2．3 安装模块 445
24．2．4 重置state 453
24．2．5 Vuex 安装 456
24．3 API 457
24．3．1 数据获取 457
24．3．2 数据存储 459
24．3．3 语法糖 463
24．3．4 动态更新模块 469
24．4 插件 470
24．5 总结 474