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
第 一部分 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
黄轶，曾任职于百度、滴滴，现担任Zoom前端架构师，推进前后端分离架构方案，同时负责Zoom自研组件库 ZoomUI 的开发。专栏“Vue.js 3.0 核心源码解析”作者，14k star 开源项目 better-scroll 作者。慕课网明星讲师，教授“Vue.js 高仿开发饿了么外卖 App”“Vue 3 开发企业级音乐Web App”“Vue.js 源码全方位深入解析”等课程，帮助上万名学生完成 Vue.js 从入门到进阶的学习。 “老黄的前端私房菜”主理人，不定期分享技术干货和软素质技能。
本书将带领读者阅读Vue.js 3.0 的源码，通过大量注释、流程图，呈现每部分源码的“前因后果”，帮助读者体会Vue.js 的设计思想。全书共七部分，分为24 章，作者结合实际用例，循序渐进地介绍了Vue.js的整体设计、组件、响应式原理、编译和优化、实用特性、内置组件、官方生态等内容。阅读本书不仅可以深入理解Vue.js 的内核实现，还能学到阅读源码的技巧，提高业务逻辑分析能力和代码重构能力。
本书面向有 Vue.js、React 或者 Angular 等框架的使用经验，对源码设计感兴趣，渴望在技术方面进一步成长的开发者。
本书面向有 Vue.js、React 或者 Angular 等框架的使用经验，对源码设计感兴趣，渴望在技术方面进一步成长的开发者。
比价列表价格走势
公众号、微信群
缺书网微信公众号
扫码进群实时获取购书优惠