前言
各位！久等了。
时隔五个月，我又开始更新公众号博客了。最近自己有点懒散，造成这么长一段时间公众号和博客断更了，在这里对关注我的各位同学们说声抱歉！！
这几个月一直忙于工作，休息时间是一半追剧，一半用来去提升自己了，然后看点书玩玩基金什么的，荒废了不少时间。最近也在一直调整自己的状态，觉得还是要更新起来，把自己学到的一些东西分享给各位同学，这样对于一个技术人来说，是一件有意义的事情！
上面扯了半天白话，说了最近自己的状况，还是快点进入主题吧。
正文
开始前，我觉得我们需要先弄清楚vue的$nextTick是干什么用的，它的存在是为了解决什么问题？大家也可以自问一下。
nextTick英文翻译过来“下一个记号或者标记”，我觉得这里应该用状态来描述更加合理一些。
上面，我抛了一个问题，现在来聊一聊这个问题，首先说一说nextTick的作用，这里我就直接引用官网api上的一句话，我觉得已经说的非常清楚了：将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。它跟全局方法 Vue.nextTick 一样，不同的是回调的 this 自动绑定到调用它的实例上。
再看一下官网的例子：
代码语言：javascript复制new Vue({
// ...
methods: {
// ...
example: function () {
// 修改数据
this.message = 'changed'
// DOM 还没有更新
this.$nextTick(function () {
// DOM 现在更新了
// `this` 绑定到当前实例
this.doSomethingElse()
})
}
}
})上面我用了官网的例子和解释，我觉得例子还没完全说明白nextTick解决了什么样的问题，所以我觉得我需要补充一下我自己的理解。
大家都知道，在vue的created生命周期里面，如果你需要在这个生命周期钩子里面操作dom是不行的，因为这个钩子执行的时候dom并没有渲染到页面上，所以会直接报错。这里有的同学就说，如果我必须要在这里操作dom呢？那这个时候就到了$nextTick登场的时候，根据官方的解释和例子也可以证明这一点，nextTick的参数回调函数执行的时候就是dom已经渲染到了页面，挂载好了，并且把当前this绑定到了当前的实例上面去了，这个时候就可以获取到更新后的dom元素去操作dom。
其实真正的用意，并不是为了解决这个，其实是为了解决响应式更新的问题。我们都知道，vue是响应式的，什么是响应式？简单说，就是数据变了，视图变，视图变了，数据变。这样一来就有一个问题，不知道大家发现了没，如果没发现，我们就先看一下下面这段代码
代码语言：javascript复制<template>
<div>
{{a}}
{{b}}
{{c}}
</div>
</template>new Vue({
data () {
return {
a: 1,
b: 2,
c: 3
}
},
created () {
this.a = 2
this.b = 3
this.c = 4
}
})上面这段代码看似很简单，对不对。但是这里有一个很有趣的事，大家先想一想，我们说了vue是响应式的，那当我们this.a做重新赋值的时候是不是就把a的值进行修改了，那修改了是不是就应该要触发页面的更新，把最新的值显示到页面上去，按理来说应该会更新三次对吧，因为我们先修改了a，然后修改b，最后修改的是c，但是结果告诉我们页面只更新了一次，为什么呢？
说到底，这是因为nextTick方法在里面作怪，我觉得这个做法非常聪明，这样可以将性能损失降到最小。
这里只更新一次是因为在源码上，在收集更新Wathcer时将更新通过nextTick方法做了延迟执行，所以当更新的时候，是先把所有的更新Wathcer收集了起来，然后调用nextTick方法做延迟更新的执行，这样一来，赋值操作就是在前一直更新数据，更新就会不断的添加更新Wathcer到队列中，最后只需要拿出队列中的所有更新Wathcer去进行挨个更新，这样一来就会是现在看到的这样，在赋值的时候并不会马上更新反应到页面，而是会先等你的赋值都做完后，最后统一更新，这样就解决了页面更新频率问题。
下面我们来看看官方的对应源码，来证明一下我说的是不是这样的。代码位置在github对应：vue/blob/dev/src/core/observer/scheduler.js文件中，大家可以去看一下
代码语言：javascript复制/**
* Push a watcher into the watcher queue.
* Jobs with duplicate IDs will be skipped unless it's
* pushed when the queue is being flushed.
*/
export function queueWatcher (watcher: Watcher) {
const id = watcher.id
if (has[id] == null) {
has[id] = true
if (!flushing) {
queue.push(watcher)
} else {
// if already flushing, splice the watcher based on its id
// if already past its id, it will be run next immediately.
let i = queue.length - 1
while (i > index && queue[i].id > watcher.id) {
i--
}
queue.splice(i 1, 0, watcher)
}
// queue the flush
if (!waiting) {
waiting = true
if (process.env.NODE_ENV !== 'production' && !config.async) {
flushSchedulerQueue()
return
}
// 这里就是延迟更新的处理 - 使用nextTick去解决频繁更新的问题。
// 上面的那些代码是在做watcher收集
nextTick(flushSchedulerQueue)
}
}
}上面说完了使用，下面就是干货了，我们来说说nextTick的原理实现，分析一下源码是怎么写的。
源码分析，源码对应位置在github的vue/blob/dev/src/core/util/next-tick.js文件下面
代码语言：javascript复制/* @flow */
/* globals MutationObserver */
import { noop } from 'shared/util'
import { handleError } from './error'
import { isIE, isIOS, isNative } from './env'
export let isUsingMicroTask = false
const callbacks = [] // 存放收集的nextTick第一参数的回调函数
let pending = false // 状态开关
// 该函数将异步执行时 处理队列中收集到的所有回调 挨个执行
function flushCallbacks () {
pending = false
// 将队列中的回调全部赋值给copies
const copies = callbacks.slice(0)
callbacks.length = 0 // 清空队列
// 遍历当前的队列，挨个执行回调
for (let i = 0; i < copies.length; i ) {
copies[i]()
}
}
// 定义一个 最后可拿到异步处理方式的变量
let timerFunc
// 如果当前环境支持promise ，那么异步的处理将使用promise去做延迟执行
if (typeof Promise !== 'undefined' && isNative(Promise)) {
const p = Promise.resolve() // 获得一个完成状态的promise
// 将promise的异步处理函数赋值给 timerFunc
timerFunc = () => {
p.then(flushCallbacks) // 执行then函数，将执行收集到的调用队列处理函数执行
if (isIOS) setTimeout(noop)
}
isUsingMicroTask = true
} else if (!isIE && typeof MutationObserver !== 'undefined' &&
isNative(MutationObserver) ||
// PhantomJS and iOS 7.x
MutationObserver.toString() === '[object MutationObserverConstructor]'
)) {
// 环境不支持promise但支持 MutationObserver，将会用MutationObserver做为异步执行处理
// (#6466 MutationObserver is unreliable in IE11)
let counter = 1
const observer = new MutationObserver(flushCallbacks)
const textNode = document.createTextNode(String(counter))
observer.observe(textNode, {
characterData: true
})
timerFunc = () => {
counter = (counter 1) % 2
textNode.data = String(counter)
}
isUsingMicroTask = true
} else if (typeof setImmediate !== 'undefined' && isNative(setImmediate)) {
// Fallback to setImmediate.
// Techinically it leverages the (macro) task queue,
// but it is still a better choice than setTimeout.
// 当前环境如果不支持 promise 与 MutationObserver ，如果支持setImmediate，将会使用setImmediate做为异步执行处理
timerFunc = () => {
setImmediate(flushCallbacks)
}
} else {
// 如果当前环境不支持以上三种异步方式，将直接使用setTimeout定时器做为异步处理
// Fallback to setTimeout.
timerFunc = () => {
setTimeout(flushCallbacks, 0)
}
}
// 这个就是nextTick函数，参数两个：回调，上下文
export function nextTick (cb?: Function, ctx?: Object) {
let _resolve
// 向队列中添加收集的回调，这里要注意，push时加了一层函数包装
callbacks.push(() => {
if (cb) { // 判断是否传递了 回调
try {
cb.call(ctx) // 通过call方法执行回调函数，并设置函数内部this指向到当前上下文
} catch (e) {
// 如果函数一旦执行报错，将抛错
handleError(e, ctx, 'nextTick')
}
} else if (_resolve) {
// 当不是一个回调时，执行promise的resolve方法，将状态变为完成，并传入当前上下文对象作为完成时的入参
_resolve(ctx)
}
})
if (!pending) { // 这是一个等待状态开关
pending = true // 等待当前的处理完后才开始下一次的
timerFunc() // 这是一个关键函数，主要是做异步操作，并且针对各种情况做了兼容的不同处理
}
// $flow-disable-line
// 如果没有回调函数，并且当前的环境支持promise，就直接返回一个promise
if (!cb && typeof Promise !== 'undefined') {
return new Promise(resolve => {
_resolve = resolve
})
}
}以上源码我做了注释，如果有不同见解的欢迎指正。
最后需要说一下重点的一个变量，就是timerFunc变量，它的最后值决定当前nextTick异步实现的处理方式，代码会挨个顺序判断兼容情况，最后选择一个最适合的方式：Promise，MutationObserver， setImmediate，setTimeout
