04 | 【阅读Vue2源码】$nextTick实现原理

前言

$nextTick是个很常用的API，简单来讲其作用是让函数延后执行。

来看下官方的描述

在深入响应式原理的文章中也有介绍到

上面官方的描述，其实也解答了，nextTick就是使用Promise、setTimeout等异步函数实现的。

分析

基本用法

<section id="app">
  <div id="count">{{ count }}</div>
  <button @click="plus">+1</button>
</section>

new Vue({
  name: 'SimpleDemoAPI',
  data() {
    return {
      count: 0
    }
  },
  methods: {
    plus() {
      this.count += 1;

      // 未更新前的值
      console.log('alan->count sync', document.getElementById('count').innerText) 
      
      this.$nextTick(() => {
        // 更新后的值
        console.log('alan->count $nextTick', document.getElementById('count').innerText) 
      })
    }
  }
})

实现原理

源码分析

$nextTick实际上是nextTick函数，在初始化Vue的时候，把nextTick赋值给了$nextTick

// src\core\instance\render.js
Vue.prototype.$nextTick = function (fn: Function) {
  return nextTick(fn, this)
}

源码位置：src/core/util/next-tick.js

import { noop } from 'shared/util'
import { handleError } from './error'
import { isIE, isIOS, isNative } from './env'
export let isUsingMicroTask = false
// 收集回调函数的队列
const callbacks = []
// 定义状态
let pending = false
// 清空回调队列的函数
function flushCallbacks () {
pending = false
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()
timerFunc = () => { // 定义行数，赋值给timerFunc
p.then(flushCallbacks) // 将flushCallbacks作为resolve的回调函数，执行完回调队列中的函数
// ios中有特殊情况
// 在有问题的UIWebViews中，Promise.then不会完全中断，但它可能会陷入一种奇怪的状态，回调被推入微任务队列，但队列不会被刷新，直到浏览器需要做一些其他工作，例如处理计时器。
// 因此，我们可以通过添加空计时器来“强制”刷新微任务队列。
if (isIOS) setTimeout(noop)
}
isUsingMicroTask = true // 标记使用微任务
} else if (!isIE && typeof MutationObserver !== 'undefined' && (
isNative(MutationObserver) ||
MutationObserver.toString() === '[object MutationObserverConstructor]'
)) {
// 当运行环境不支持Promise时，判断下是否支持MutationObserver，如支持则使用MutationObserver
let counter = 1
// 用flushCallbacks作为MutationObserver的回调函数
const observer = new MutationObserver(flushCallbacks)
// 创建临时的文本节点，用MutationObserver观测它的变化，以触发new MutationObserver(flushCallbacks)执行
const textNode = document.createTextNode(String(counter))
observer.observe(textNode, {
characterData: true
})
timerFunc = () => { // 将更改DOM的函数赋值给timerFunc
// 当执行nextTick时，会执行timerFunc，这里改变textNode的值，每次+1
// 触发new MutationObserver(flushCallbacks)执行
counter = (counter + 1) % 2
textNode.data = String(counter)
}
isUsingMicroTask = true
} else if (typeof setImmediate !== 'undefined' && isNative(setImmediate)) {
// 当运行环境不支持Promise、MutationObserver时，判断下是否支持setImmediate，如支持则使用setImmediate
// setImmediate这个API只在node环境下可用
timerFunc = () => {
setImmediate(flushCallbacks)
}
} else {
// 如果上面的方式都不行，则使用setTimeout
// Fallback to setTimeout.
timerFunc = () => {
setTimeout(flushCallbacks, 0)
}
}
// 调用$nextTick时，执行该函数
export function nextTick (cb?: Function, ctx?: Object) {
let _resolve // 缓存Promise的resolve
// 收集回调函数
callbacks.push(() => {
if (cb) {
try {
cb.call(ctx)
} catch (e) {
handleError(e, ctx, 'nextTick')
}
} else if (_resolve) {
// 执行Promise的resolve回调
_resolve(ctx)
}
})
if (!pending) {
pending = true
// 执行定时器函数，核心逻辑
timerFunc()
}
// $flow-disable-line
if (!cb && typeof Promise !== 'undefined') {
return new Promise(resolve => {
_resolve = resolve
})
}
}

实现逻辑：

1. 初始化模块文件

2. 定义callbacks

3. 定义状态pending = false

4. 定义冲刷队列函数flushCallbacks()

5. 定义定时器函数timerFunc()

   • 如果有Promise，直接执行Promise.resolve(flushCallbacks)
   • 如果有MutationObserver，就new MutationObserver(flushCallbacks)，然后创建一个文本节点，用observer观测它。在timerFunc()里改变文本节点的值textNode.data = String((counter + 1) % 2)，当执行timerFunc()时，改变文本节点，变化一次就触发一次MutationObserver，就会执行flushCallbacks()
   • 如果有setImmediate，就执行setImmediate(flushCallbacks)
   • 如果上面都不行，就使用setTimeout，执行setTimeout(flushCallbacks, 0)

6. 把回调函数cb，放入一个callbacks队列里

7. 标记执行状态pending = true

8. 执行定时器函数timerFunc()，走timerFunc里面的逻辑

调用链路

一些疑问

ios下为什么要执行一下setTimeout？

在有问题的UIWebViews中，Promise.then不会完全中断，但它可能会陷入一种奇怪的状态，回调被推入微任务队列，但队列不会被刷新，直到浏览器需要做一些其他工作，例如处理计时器。因此，我们可以通过添加空计时器来“强制”刷新微任务队列。

为什么要用MutationObserver呢？

在不支持Promise的地方使用，例如：PhantomJS, iOS7, Android 4.4

降级到定时器，为什么优先选择setImmediate？

从技术上讲，它利用了(宏)任务队列，但它仍然是比setTimeout更好的选择。

总结

nextTick其实挺简单的，底层就是使用了微任务/宏任务来实现，Promise -> MutationObserver -> setImmediate -> setTimeout，将回调函数存放到队列中，然后利用事件循环的特点，每次循环结束前，先将微任务、宏任务清空。