深入浅出 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

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