来，送你一本免费的Vue源码解析！

噔噔噔噔！合计8万多字的Vue源码分析终于告一段落了。过程不易，码字辛苦，但愿走过路过的兄弟们能赏个赞，给个star，万分感谢。

完整地址：深刻剖析Vue源码

过程感悟

这个系列能连载说实话也挺不容易的，最开始的目标是在每次读完源码以后能把对过程的思考以及对做者思路的猜想作些笔记，以达到能更深入理解这个框架，更快定位问题的目的。然而随着过程的进行，慢慢发现源码中每一个实现，每一个细节都有不少值得思考的东西，也渐渐喜欢上了这种以博客形式分析记录的方式，最终也有了这份记录的合集。

源码分析的过程是枯燥的，也是难以入手的，因此也特别感谢网上能够看到的一些源码解析的文章，站在了巨人的肩膀上让本身少走了不少的弯路。因为自身能力的不足，视野的受限，不免对源码内部的理解会有不少错误的地方，但愿有兴趣看的各位能提供建议，也但愿各位可以多多包涵。

最后我以为写完这个系列最大的收获有三点：首先是文字表达能力的提高，毕竟这么多字写下来，总归在文字表达方面有所成长。而后就是能更加游刃有余的定位问题，尽管这个系列并不能涵盖全部的知识，可是分析源码的过程让本身在平常开发中快速定位解决问题的能力有了很大的提高。最后就是框架思想的运用，源码中有不少的思想，若是你不去看，在开发中是想不到的，可以将好的框架的思想运用到平常的项目中，才是最大的提高。

章节结构

丰富的选项合并策略

new Vue是运行Vue框架的第一步，Vue做为构造器，实例化阶段的第一步是执行初始化过程，而选项合并是初始化的开始。咱们会向构造器中传递各类类型的可配置选项，例如data,props,或者像mounted这类生命周期钩子。而除了这些用户自定义的选项，Vue还提供了不少内部的选项，这些选项遵循什么样的合并规则就是这一节分析的重点。

深刻剖析Vue源码 - 选项合并(上)

深刻剖析Vue源码 - 选项合并(下)

基础的数据代理

使用Vue作开发的同窗都知道，Vue的核心是它的响应式系统，而响应式系统的核心是利用了Object.defineProperty进行数据拦截，这一节内容会深刻分析Vue中两种数据拦截的方式：Object.defineProperty,Proxy,尽管响应式系统用的是兼容性更好的Object.defineProperty，可是proxy也在源码中使用上了，其中的一个例子就是用做数据过滤筛选。

深刻剖析Vue源码 - 基础的数据代理检测

完整挂载流程和模板编译

Vue版本提供了运行时版本和同时包含编译器和运行时的版本，他们都有各自的使用场景。除了介绍二者的区别外，文章的核心还介绍了实例在挂载阶段的完整流程，虽然不会对流程中的每一个具体环节展开分析，可是能够知道大体完整的挂载思路。文章最后还介绍了编译器巧妙的设计思路。

深刻剖析Vue源码 - 完整挂载流程和模板编译

完整渲染流程

Virtual DOM是js操做和DOM渲染之间的桥梁，JS对DOM节点的操做，都会批量反应到Virtual DOM这个节点描述对象上，它的理念很大程度提升了渲染的性能。有了上一节的基础，这一节会分析两个挂载阶段的核心过程，render,update,render阶段会将模板编译渲染函数，解析成Virtual DOM树，update阶段会将Virtual DOM树映射为真实的DOM节点。

深刻剖析Vue源码 - 完整渲染流程

组件基础剖析

组件是Vue另外一个核心，组件化开发是衡量Vue开发能力的标准。文章会从组件的注册开始，介绍全局注册和局部注册在实现原理上的区别，另外组件的挂载流程也是分析的重点，这一切也都依赖于前面介绍过的渲染流程。

深刻剖析Vue源码 - 组件基础剖析

组件高级用法

除了基础的组件用法，Vue还提供了高级的用法，例如异步组件和函数组件。异步组件是首屏性能优化的解决方案，深刻它的实现原理更有助于咱们在开发中首屏性能问题。而函数式组件也有其独特的使用场景。 深刻剖析Vue源码 - 组件高级用法

深刻响应式系统构建- 上，中，下

响应式系统构建是Vue的核心，也是难点，这个系列会有三篇的内容去尝试分析内部的实现细节。从响应式数据的构建，再到每种数据类型依赖收集和派发更新的分析。文章也模拟了一个简易版的响应式系统方便深层次源码的分析。在响应式系统构建中，还有不少的特殊状况须要考虑，例如数组的响应式构建，对象的异常处理等。

深刻剖析Vue源码 - 响应式系统构建(上) 深刻剖析Vue源码 - 响应式系统构建(中) 深刻剖析Vue源码 - 响应式系统构建(下)

diff算法的实现

virtual dom引入的另外一个关键是在旧节点发生改变时，利用diff算法比较新旧节点的差别，以达到最小变化的改变真实节点。文章会从脱离框架的角度实现一个diff算法。

深刻剖析Vue源码 - 来，跟我一块儿实现diff算法!

揭秘Vue的事件机制

Vue提供了不少实用的功能给用户，其中一个就是使用模板去进行事件监听。@click做为事件指令会在模板编译阶段解析，而且会在真实节点的渲染阶段进行相关事件的绑定。而对于组件的事件而言，他提供了子父组件通讯的方式，本质上是在同个子组件内部维护了一个事件总线。更多的内容能够参考文章的分析。

深刻剖析Vue源码 - 揭秘Vue的事件机制

你想了解的Vue插槽

Vue组件的另外一个重要概念是插槽，它容许你以一种不一样于严格的父子关系的方式组合组件。插槽为你提供了一个将内容放置到新位置或使组件更通用的出口。这一节将围绕官网对插槽内容的介绍思路，按照普通插槽，具名插槽，再到做用域插槽的思路，逐步深刻内部的实现原理。

深刻剖析Vue源码 - Vue插槽，你想了解的都在这里!

v-model的语法糖

咱们都知道v-model是实现双向数据绑定的核心，但若是深刻源码咱们能够知道，v-model的核心只是经过事件触发去改变表单的值。除此以前v-model语法糖还在组合输入过程作了一系列的优化。另外组件上使用v-model本质上只是一个子父组件通讯的语法糖。

深刻剖析Vue源码 - 你了解v-model的语法糖吗？

动态组件的深刻分析

这一节，咱们又回到了组件的分析。动态组件是咱们平时开发中高频率使用的东西。核心是is属性的使用。文末还粗略介绍了另外一个概念，动态组件。

深刻剖析Vue源码 - Vue动态组件的概念，你会乱吗？

keep-alive的魔法

内置组件中最重要，也是最常用的是keep-alive组件，咱们将keep-alive配合动态组件is使用，达到在切换组件的同时，将旧组件进行缓存，以便保留初始状态的目的。keep-alive有不一样于其余组件的生命周期，而且他在缓存上也作了优化。