Vue源码解析

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

上一节对keep-alive组件的分析，是从我画的一个流程图开始的。如果不想回过头看上一节的内容，可以参考以下的简单总结。 和普通组件一致，当父在创建真实节点的过程中，遇到keep-alive的组件会进行组件的初始化和实例化。 实例化会执行挂载$mount的过程，这一步会执行k…

keep-alive的使用只需要在动态组件的最外层添加标签即可。 简单的结果如下，动态组件在child1,child2之间来回切换，当第二次切到child1时，child1保留着原来的数据状态，num = 5。 按照以往分析的经验，我们会从模板的解析开始说起，第一个疑问便是：内…

动态组件我相信大部分在开发的过程中都会用到，当我们需要在不同的组件之间进行状态切换时，动态组件可以很好的满足我们的需求，其中的核心是component标签和is属性的使用。 例子是一个动态组件的基本使用场景，当点击按钮时，视图根据this.chooseTabs值在组件child…

由于v-model和前面介绍的插槽，事件一致，都属于vue提供的指令，所以我们对v-model的分析方式和以往大同小异。分析会围绕模板的编译，render函数的生成，到最后真实节点的挂载顺序执行。最终我们依然会得到一个结论，v-model无论什么使用场景，本质上都是一个语法糖。…

从根实例入手进行实例的挂载，如果有手写的render函数，则直接进入$mount挂载流程。 只有template模板则需要对模板进行解析，这里分为两个阶段，一个是将模板解析为AST树，另一个是根据不同平台生成执行代码，例如render函数。 $mount流程也分为两步，第一步是…

9.1. 模板编译 Vue在挂载实例前，有相当多的工作是进行模板的编译，将template模板进行编译，解析成AST树，再转换成render函数，而有了render函数后才会进入实例挂载过程。对于事件而言，我们经常使用v-on或者@在模板上绑定事件。因此对事件的第一步处理，就是…

之前讲到Vue在渲染机制的优化上，引入了Virtual DOM的概念，利用Virtual DOM描述一个真实的DOM,本质上是在JS和真实DOM之间架起了一层缓冲层。当我们通过大量的JS运算,并将最终结果反应到浏览器进行渲染时，Virtual DOM可以将多个改动合并成一个批量…

在之前介绍数据代理章节，我们已经详细介绍过Vue数据代理的技术是利用了Object.defineProperty,Object.defineProperty让我们可以方便的利用存取描述符中的getter/setter来进行数据的监听,在get,set钩子中分别做不同的操作，达到…

watcher类，实例化watcher类相当于创建一个依赖，简单的理解是数据在哪里被使用就需要产生了一个依赖。当数据发生改变时，会通知到每个依赖进行更新，前面提到的渲染wathcer便是渲染dom时使用数据产生的依赖。 Dep类，既然watcher理解为每个数据需要监听的依赖，…

回顾一下之前的内容，我们对Vue源码的分析是从初始化开始，初始化_init会执行一系列的过程，这个过程包括了配置选项的合并，数据的监测代理，最后才是实例的挂载。而在实例挂载前还有意忽略了一个重要的过程，数据的初始化(即initState(vm))。initState的过程，是对…

Vue作为单页面应用遇到最棘手的问题是首屏加载时间的问题，单页面应用会把页面脚本打包成一个文件，这个文件包含着所有业务和非业务的代码，而脚本文件过大也是造成首页渲染速度缓慢的原因。因此作为首屏性能优化的课题，最常用的处理方法是对文件的拆分和代码的分离。按需加载的概念也是在这个前…

熟悉Vue开发流程的都知道，Vue组件在使用之前需要进行注册，而注册的方式有两种，全局注册和局部注册。在进入源码分析之前，我们先回忆一下两者的用法，以便后续掌握两者的差异。 其中组件的全局注册需要在全局实例化Vue前调用,注册之后可以用在任何新创建的Vue实例中调用。 当只需要…

当浏览器接收到一个Html文件时，JS引擎和浏览器的渲染引擎便开始工作了。从渲染引擎的角度，它首先会将html文件解析成一个DOM树，与此同时，浏览器将识别并加载CSS样式，并和DOM树一起合并为一个渲染树。有了渲染树后，渲染引擎将计算所有元素的位置信息，最后通过绘制，在屏幕上…

在正文开始之前，我们先了解一下vue基于源码构建的两个版本，一个是runtime only(一个只包含运行时的版本)，另一个是runtime + compiler(一个同时包含编译器和运行时的版本)。而两个版本的区别仅在于后者包含了一个编译器。 通俗点讲，编译器是一个提供了将源…

数据代理的另一个说法是数据劫持，当我们在访问或者修改对象的某个属性时，数据劫持可以拦截这个行为并进行额外的操作或者修改返回的结果。而我们知道Vue响应式系统的核心就是数据代理，代理使得数据在访问时进行依赖收集，在修改更新时对依赖进行更新，这是响应式系统的核心思路。而这一切离不开…

合并策略之所以是难点，其中一个是合并选项类型繁多，合并规则随着选项的不同也呈现差异。概括起来思路主要是以下两点： Vue针对每个规定的选项都有定义好的合并策略，例如data,component,mounted等。如果合并的子父配置都具有相同的选项，则只需要按照规定好的策略进行选…

Vue的使用按照官方的说法支持CDN和NPM两种方式，CDN的方式是以script的方式将打包好的vue.js引入页面脚本中，而NPM的方式是和诸如 webpack 或 Browserify 模块打包器配置使用，以npm install vue的方式引入，这也是我们开发应用的主…