【vue】nextTick源码解析

1、整体入手

阅读代码和画画是一样的，忌讳一开始就从细节下手(比如一行一行读)，我们先将细节代码折叠起来，整体观察nextTick源码的几大块。

折叠后代码如下图

整体观察代码结构

上图中，可以看到：

1. nextTick等于一个立即执行函数。函数执行后，内部返回另一个匿名函数function (cb, ctx)。从语义化命名可以分析，第一个参数cb是个回调函数、ctx这里先猜测应该是个上下文。

2. 在return返回之前，立即执行函数被调用后，函数内部先用var定义了三个参数、用function声明一个函数。

先不管这些变量是干啥用的。光从语义化命名上瞎分析一下：

• callbacks可能是一个装callback回调的数组，可能是将来有多个回调的时候模拟队列执行效果用的。

• pending是一个布尔值。pending这个单词在接口请求中会看到，可能是用来标识某个状态是否正在进行中的。

• timeFunc目前看来就不知道具体干啥的了。

• nextTickHandler函数先不管。用到的时候再来看。

以上，就是初始化对代码的分析。

2、逐行解析

看完大的代码块结构后，可以按照js引擎解析代码的顺序来分析源码了。前边的变量和函数声明看完后，就到解析if语句了。

在if条件中，有一个判断：typeof MutationObserver !== 'undefined' && !hasMutationObserverBug。

MutationObserver这玩意儿是干啥的？

A、MutationObserver

度娘说他“提供了监视对DOM树所做更改的能力”。大白话粗糙理解就是他能监听dom修改。

是HTML5中的一个新特性。

MutationObserver()

该属性提供一个构造函数MutationObserver()

通过new MutationObserver()可以得到一个新的观察器，它会在触发指定 DOM 事件时，调用指定的回调函数。

「MutationObserver 对 DOM 的观察不会立即启动；而必须先调用 observe() 方法来确定，要监听哪一部分的 DOM 以及要响应哪些更改。」

observe(target[, options])

启用观察者，开始根据配置监听指