• 深入剖析Vue源码
    • gitbook地址
    • 章节结构
    • 丰富的选项合并策略
    • 基础的数据代理
    • 完整挂载流程和模板编译
    • 完整渲染流程
    • 组件基础剖析
    • 组件高级用法
    • 深入响应式系统构建- 上,中,下
    • diff算法的实现
    • 揭秘Vue的事件机制
    • 你想了解的Vue插槽
    • v-model的语法糖
    • 动态组件的深入分析
    • keep-alive的魔法

    深入剖析Vue源码

    0. 深入剖析Vue源码 - 图1

    gitbook地址

    深入剖析Vue源码

    章节结构

    丰富的选项合并策略

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

    基础的数据代理

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

    完整挂载流程和模板编译

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

    完整渲染流程

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

    组件基础剖析

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

    组件高级用法

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

    深入响应式系统构建- 上,中,下

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

    diff算法的实现

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

    揭秘Vue的事件机制

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

    你想了解的Vue插槽

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

    v-model的语法糖

    我们都知道v-model是实现双向数据绑定的核心,但如果深入源码我们可以知道,v-model的核心只是通过事件触发去改变表单的值。除此之前v-model语法糖还在组合输入过程做了一系列的优化。另外组件上使用v-model本质上只是一个子父组件通信的语法糖。

    动态组件的深入分析

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

    keep-alive的魔法

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