前言

各位！久等了。
时隔五个月，我又开始更新公众号博客了。最近自己有点懒散，造成这么长一段时间公众号和博客断更了，在这里对关注我的各位同学们说声抱歉！！
这几个月一直忙于工作，休息时间是一半追剧，一半用来去提升自己了，然后看点书玩玩基金什么的，荒废了不少时间。最近也在一直调整自己的状态，觉得还是要更新起来，把自己学到的一些东西分享给各位同学，这样对于一个技术人来说，是一件有意义的事情！
上面扯了半天白话，说了最近自己的状况，还是快点进入主题吧。

正文

开始前，我觉得我们需要先弄清楚vue的$nextTick是干什么用的，它的存在是为了解决什么问题？大家也可以自问一下。

nextTick英文翻译过来“下一个记号或者标记”，我觉得这里应该用状态来描述更加合理一些。

上面，我抛了一个问题，现在来聊一聊这个问题，首先说一说nextTick的作用，这里我就直接引用官网api上的一句话，我觉得已经说的非常清楚了：将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。它跟全局方法 Vue.nextTick 一样，不同的是回调的 this 自动绑定到调用它的实例上。

再看一下官网的例子：

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是响应式的，什么是响应式？简单说，就是数据变了，视图变，视图变了，数据变。这样一来就有一个问题，不知道大家发现了没，如果没发现，我们就先看一下下面这段代码

<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文件中，大家可以去看一下

/**
 * 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文件

/* @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