深入浅出 Vue.js

🌙
手机阅读
本文目录结构

深入浅出 Vue.js

编辑推荐

深入讲解 Vue.js 实现原理和思想

360 奇舞团团长月影和《JavaScript 高级程序设计》译者李松峰作序推荐

360 前端工程师精心打造,带你深入了解 Vue.js 的源码

内容简介

本书从源码层面分析了 Vue.js。首先,简要介绍了 Vue.js;然后详细讲解了其内部核心技术“变化侦测”,这里带领大家从 0 到 1 实现一个简单的“变化侦测”系统;接着详细介绍了虚拟 DOM 技术,其中包括虚拟 DOM 的原理及其 patching 算法;紧接着详细讨论了模板编译技术,其中包括模板解析器的实现原理、优化器的原理以及代码生成器的原理;最后详细介绍了其整体架构以及提供给我们使用的各种 API 的内部原理,同时还介绍了生命周期、错误处理、指令系统与模板过滤器等功能的原理。 本书适合前端开发人员阅读。

作者简介

刘博文,网名 Berwin,95 后,从事 Web 前端工作 5 年,2015 年加入 360 奇舞团,现任 360 导航事业部前端工程师,负责 360 导航首页及二级页创新项目等亿级 PV 站点的设计与优化,推动 Vue.js 成为部门内广泛使用的核心技术栈,独立研发相关开发工具与技术解决方案并使之成功落地。

W3C 性能工作组成员,在 Web 性能领域有深入研究。热爱开源,热爱技术,梦想是用技术改变世界。个人 GitHub 地址:https://github.com/berwin

目录

第 1 章 Vue.js 简介 1

  • 1.1 什么是 Vue.js 1
  • 1.2 Vue.js 简史 2

第 一篇 变化侦测

第 2 章 Object 的变化侦测 6

  • 2.1 什么是变化侦测 6
  • 2.2 如何追踪变化 7
  • 2.3 如何收集依赖 7
  • 2.4 依赖收集在哪里 8
  • 2.5 依赖是谁 10
  • 2.6 什么是 Watcher 10
  • 2.7 递归侦测所有 key 12
  • 2.8 关于 Object 的问题 13
  • 2.9 总结 14

第 3 章 Array 的变化侦测 16

  • 3.1 如何追踪变化 16
  • 3.2 拦截器 17
  • 3.3 使用拦截器覆盖 Array 原型 18
  • 3.4 将拦截器方法挂载到数组的属性上 19
  • 3.5 如何收集依赖 21
  • 3.6 依赖列表存在哪儿 22
  • 3.7 收集依赖 23
  • 3.8 在拦截器中获取 Observer 实例 24
  • 3.9 向数组的依赖发送通知 25
  • 3.10 侦测数组中元素的变化 26
  • 3.11 侦测新增元素的变化 27
  • 3.11.1 获取新增元素 27
  • 3.11.2 使用 Observer 侦测新增元素 28
  • 3.12 关于 Array 的问题 29
  • 3.13 总结 29

第 4 章 变化侦测相关的 API 实现原理 31

  • 4.1 vm.$watch 31
  • 4.1.1 用法 31
  • 4.1.2 watch 的内部原理 32
  • 4.1.3 deep 参数的实现原理 36
  • 4.2 vm.$set 38
  • 4.2.1 用法 38
  • 4.2.2 Array 的处理 39
  • 4.2.3 key 已经存在于 target 中 40
  • 4.2.4 处理新增的属性 40
  • 4.3 vm.$delete 41
  • 4.3.1 用法 42
  • 4.3.2 实现原理 42
  • 4.4 总结 45

第二篇 虚拟 DOM

第 5 章 虚拟 DOM 简介 48

  • 5.1 什么是虚拟 DOM 48
  • 5.2 为什么要引入虚拟 DOM 51
  • 5.3 Vue.js 中的虚拟 DOM 51
  • 5.4 总结 53

第 6 章 VNode 54

  • 6.1 什么是 VNode 54
  • 6.2 VNode 的作用 55
  • 6.3 VNode 的类型 56
  • 6.3.1 注释节点 57
  • 6.3.2 文本节点 57
  • 6.3.3 克隆节点 57
  • 6.3.4 元素节点 58
  • 6.3.5 组件节点 59
  • 6.3.6 函数式组件 59
  • 6.4 总结 59

第 7 章 patch 60

  • 7.1 patch 介绍 60
  • 7.1.1 新增节点 61
  • 7.1.2 删除节点 62
  • 7.1.3 更新节点 63
  • 7.1.4 小结 63
  • 7.2 创建节点 64
  • 7.3 删除节点 67
  • 7.4 更新节点 68
  • 7.4.1 静态节点 68
  • 7.4.2 新虚拟节点有文本属性 69
  • 7.4.3 新虚拟节点无文本属性 69
  • 7.4.4 小结 70
  • 7.5 更新子节点 72
  • 7.5.1 更新策略 72
  • 7.5.2 优化策略 77
  • 7.5.3 哪些节点是未处理过的 82
  • 7.5.4 小结 83
  • 7.6 总结 86

第三篇 模板编译原理

第 8 章 模板编译 88

  • 8.1 概念 88
  • 8.2 将模板编译成渲染函数 89
  • 8.2.1 解析器 90
  • 8.2.2 优化器 91
  • 8.2.3 代码生成器 91
  • 8.3 总结 92

第 9 章 解析器 93

  • 9.1 解析器的作用 93
  • 9.2 解析器内部运行原理 94
  • 9.3 HTML 解析器 99
  • 9.3.1 运行原理 100
  • 9.3.2 截取开始标签 101
  • 9.3.3 截取结束标签 107
  • 9.3.4 截取注释 108
  • 9.3.5 截取条件注释 108
  • 9.3.6 截取 DOCTYPE 109
  • 9.3.7 截取文本 109
  • 9.3.8 纯文本内容元素的处理 112
  • 9.3.9 使用栈维护 DOM 层级 114
  • 9.3.10 整体逻辑 114
  • 9.4 文本解析器 117
  • 9.5 总结 121

第 10 章 优化器 122

  • 10.1 找出所有静态节点并标记 125
  • 10.2 找出所有静态根节点并标记 127
  • 10.3 总结 129

第 11 章 代码生成器 130

  • 11.1 通过 AST 生成代码字符串 131
  • 11.2 代码生成器的原理 134
  • 11.2.1 元素节点 134
  • 11.2.2 文本节点 136
  • 11.2.3 注释节点 137
  • 11.3 总结 137

第四篇 整体流程

第 12 章 架构设计与项目结构 140

  • 12.1 目录结构 140
  • 12.2 架构设计 143
  • 12.3 总结 145

第 13 章 实例方法与全局 API 的

  • 实现原理 146
  • 13.1 数据相关的实例方法 147
  • 13.2 事件相关的实例方法 147
  • 13.2.1 vm.$on 148
  • 13.2.2 vm.$off 149
  • 13.2.3 vm.$once 152
  • 13.2.4 vm.$emit 153
  • 13.3 生命周期相关的实例方法 154
  • 13.3.1 vm.$forceUpdate 154
  • 13.3.2 vm.$destroy 155
  • 13.3.3 vm.$nextTick 159
  • 13.3.4 vm.$mount 169
  • 13.4 全局 API 的实现原理 178
  • 13.4.1 Vue.extend 178
  • 13.4.2 Vue.nextTick 182
  • 13.4.3 Vue.set 183
  • 13.4.4 Vue.delete 183
  • 13.4.5 Vue.directive 184
  • 13.4.6 Vue.filter 185
  • 13.4.7 Vue.component 186
  • 13.4.8 Vue.use 188
  • 13.4.9 Vue.mixin 189
  • 13.4.10 Vue.compile 190
  • 13.4.11 Vue.version 190
  • 13.5 总结 191

第 14 章 生命周期 192

  • 14.1 生命周期图示 192
  • 14.1.1 初始化阶段 193
  • 14.1.2 模板编译阶段 194
  • 14.1.3 挂载阶段 194
  • 14.1.4 卸载阶段 194
  • 14.1.5 小结 194
  • 14.2 从源码角度了解生命周期 195
  • 14.3 errorCaptured 与错误处理 199
  • 14.4 初始化实例属性 203
  • 14.5 初始化事件 204
  • 14.6 初始化 inject 208
  • 14.6.1 provide/inject 的使用方式 208
  • 14.6.2 inject 的内部原理 210
  • 14.7 初始化状态 215
  • 14.7.1 初始化 props 216
  • 14.7.2 初始化 methods 224
  • 14.7.3 初始化 data 225
  • 14.7.4 初始化 computed 228
  • 14.7.5 初始化 watch 238
  • 14.8 初始化 provide 241
  • 14.9 总结 241

第 15 章 指令的奥秘 242

  • 15.1 指令原理概述 242
  • 15.1.1 v-if 指令的原理概述 243
  • 15.1.2 v-for 指令的原理概述 243
  • 15.1.3 v-on 指令 244
  • 15.2 自定义指令的内部原理 246
  • 15.3 虚拟 DOM 钩子函数 250
  • 15.4 总结 251

第 16 章 过滤器的奥秘 252

  • 16.1 过滤器原理概述 253
  • 16.1.1 串联过滤器 254
  • 16.1.2 滤器接收参数 254
  • 16.1.3 resolveFilter 的内部原理 255
  • 16.2 解析过滤器 256
  • 16.3 总结 258

第 17 章 最佳实践 259

  • 17.1 为列表渲染设置属性 key 259
  • 17.2 在 v-if/v-if-else/v-else 中使用 key 259
  • 17.3 路由切换组件不变 260
  • 17.3.1 路由导航守卫 beforeRouteUpdate 261
  • 17.3.2 观察 $route 对象的变化 261
  • 17.3.3 为 router-view 组件添加属性 key 262
  • 17.4 为所有路由统一添加 query 262
  • 17.4.1 使用全局守卫 beforeEach 263
  • 17.4.2 使用函数劫持 263
  • 17.5 区分 Vuex 与 props 的使用边界 264
  • 17.6 避免 v-if 和 v-for 一起使用 264
  • 17.7 为组件样式设置作用域 266
  • 17.8 避免在 scoped 中使用元素选择器 267
  • 17.9 避免隐性的父子组件通信 268
  • 17.10 单文件组件如何命名 268
  • 17.10.1 单文件组件的文件名的大小写 268
  • 17.10.2 基础组件名 269
  • 17.10.3 单例组件名 270
  • 17.10.4 紧密耦合的组件名 270
  • 17.10.5 组件名中的单词顺序 271
  • 17.10.6 完整单词的组件名 272
  • 17.10.7 组件名为多个单词 273
  • 17.10.8 模板中的组件名大小写 273
  • 17.10.9 JS/JSX 中的组件名大小写 274
  • 17.11 自闭合组件 275
  • 17.12 prop 名的大小写 276
  • 17.13 多个特性的元素 276
  • 17.14 模板中简单的表达式 276
  • 17.15 简单的计算属性 277
  • 17.16 指令缩写 278
  • 17.17 良好的代码顺序 278
  • 17.17.1 组件 / 实例的选项的顺序 278
  • 17.17.2 元素特性的顺序 280
  • 17.17.3 单文件组件顶级元素的顺序 281
  • 17.18 总结 282

AXIHE / 精选教程

浏览全部教程

HTML

CSS

JS

关于朱安邦

我叫 朱安邦,阿西河的站长,在杭州。

以前是一名平面设计师,后来开始接接触前端开发,主要研究前端技术中的JS方向。

业余时间我喜欢分享和交流自己的技术,欢迎大家关注我的 Bilibili

关注我: Github / 知乎

如果你加我的私人微信,麻烦写上您的 称呼,所在地区,职业,方便我备注,谢谢


本站的微信公众号

阿西河前端教程

Anbang

安邦的私人微信

微信号: yaolushan

Anbang

Bilibili(B站)

朱安邦

Anbang