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