阅读 924

来,送你一本免费的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 DOMjs操作和DOM渲染之间的桥梁,JSDOM节点的操作,都会批量反应到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有不同于其他组件的生命周期,并且他在缓存上也做了优化。