Vue.js技术内幕_黄轶_9787115596468

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

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

你还可能感兴趣

我要评论