Vue.js技术内幕

图书标准信息

• 作者 黄轶
• 出版社 人民邮电出版社
• 出版时间 2022-09
• 版次 1
• ISBN 9787115596468
• 定价 119.80元
• 装帧 平装
• 开本 16开
• 页数 474页
• 字数 675千字

【内容简介】

本书将带领读者阅读 Vue.js 3.0 的源码，通过大量注释、流程图，将每部分源码的前因后果呈现给大家，帮助工程师地体会 Vue 框架的设计思想。全书共七部分，24 章，作者结合实际用例，循序渐进地介绍了 Vue.js 的整体设计、组件、响应式原理、编译和优化、实用特性、内置组件、官方生态等内容。阅读本书不仅可以深入理解Vue.js 的内核实现，还能学习到阅读源码的技巧，提高业务逻辑分析能力和重构代码的能力。
  本书面向有 Vue.js、React 或者 Angular 等框架使用经验的，对源码设计感兴趣，渴望在技术方向进一步成长的开发者。

【作者简介】

黄轶，曾任职于百度、滴滴，现担任Zoom前端架构师，推进前后端分离架构方案，同时负责Zoom自研组件库 ZoomUI 的开发。专栏“Vue.js 3.0 核心源码解析”作者，14k star 开源项目 better-scroll 作者。慕课网明星讲师，教授“Vue.js 高仿开发饿了么外卖 App”“Vue 3 开发企业级音乐Web App”“Vue.js 源码全方位深入解析”等课程，帮助上万名学生完成 Vue.js 从入门到进阶的学习。

“老黄的前端私房菜”主理人，不定期分享技术干货和软素质技能。

【目录】

目录

第 一部分 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