nextTick的使用背景

• 在vue项目中，经常会使用到nextTick这个api，一直在猜想其是怎么实现的，今天有幸研读了下，虽然源码又些许问题，但仍值得借鉴

核心源码解析

判断当前环境使用最合适的API并保存函数

promise

• 判断是否支持promise，如果支持就使用Promise对象的then方法包裹要执行的 flushCallbacks函数

MutationObserver

• 判断是否支持MutationObserver，如果支持就创建一个MutationObserver 用于监听dom改动之后执行 flushCallbacks 函数 并赋值给 observer

setImmediate

• 判断是否支持setImmediate，如果支持就使用setImmediate包裹 flushCallbacks函数

setTimeout

• 如果以上三种都不支持使用setTimeout包裹 flushCallbacks函数

export let isUsingMicroTask = false//是否使用微任务标志const callbacks = []//任务对列 调用nextTick时传入的回调函数组成的数组
let pending = false//初始化 是否在进行中状态  默认是false  function flushCallbacks() {//循环执行 callbacks  任务队列中的任务pending = falseconst copies = callbacks.slice(0)//callbacks.length = 0for (let i = 0; i < copies.length; i++) {// 依次执行callbacks数组中的函数copies[i]()}
}let timerFuncif (typeof Promise !== 'undefined' && isNative(Promise)) {// 向下兼容操作 如果支持Promise 则使用Promiseconst p = Promise.resolve()//直接返回一个resolved状态的Promise对象timerFunc = () => {p.then(flushCallbacks)// 在Promise的then方法中执行 flushCallbacks 函数if (isIOS) setTimeout(noop)//ios中在一些异常的webview中，promise结束后任务队列并没有刷新，所以强制执行setTimeout(noop)来刷新任务队列}isUsingMicroTask = true//重置使用微任务标示为true
} else if (!isIE && typeof MutationObserver !== 'undefined' && (isNative(MutationObserver) ||MutationObserver.toString() === '[object MutationObserverConstructor]'
)) {
// MutationObserver 属性支持，则使用MutationObserver let counter = 1const observer = new MutationObserver(flushCallbacks)// 创建一个MutationObserver 用于监听dom改动之后执行 flushCallbacks 函数 并赋值给 observerconst textNode = document.createTextNode(String(counter))// 创建一个文本节点observer.observe(textNode, {characterData: true})// 每次执行timeFunc都会让文本节点的内容在0/1之间切换timerFunc = () => {counter = (counter + 1) % 2textNode.data = String(counter)}// 切换之后将新值赋值到那个我们MutationObserver观测的文本节点上去isUsingMicroTask = true
} else if (typeof setImmediate !== 'undefined' && isNative(setImmediate)) {
// setImmediate 属性支持，则使用setImmediatetimerFunc = () => {setImmediate(flushCallbacks)}
} else {
// 以上都不支持，则使用 setTimeouttimerFunc = () => {setTimeout(flushCallbacks, 0)}
}

调用异步函数执行回调对列

入参分析

nextTick(cb?: Function, ctx?: Object) {}

• cb是 传入的回调函数
• ctx是函数执行的上下文
• 而者都又是可选参数， 但是有问题 下文有解析

函数执行逻辑

• 将调用nextTick是传入的执行函数添加到 callbacks中
• 可使用call和传入的ctx修改传入的执行函数的this指向

export function nextTick(cb?: Function, ctx?: Object) {// cb 是 nextTick 包裹的执行函数// ctx 是函数执行的上下文 // console.log("nextTick000",cb,ctx)let _resolve//伪代码// 向 callbacks 数组中添加一个函数callbacks.push(() => {if (cb) {try {cb.call(ctx)//修改回调函数的this指向 } catch (e) {//  异常捕获 如果cb不是函数 抛出异常handleError(e, ctx, 'nextTick')}}  })// console.log("pendingcallbacks",callbacks,pending)if (!pending) {// console.log("pendingcallback0999",callbacks,pending)pending = truetimerFunc()}
}

• 这个代码有删减，因为其余代码不会执行是 伪代码 下文有解析

伪代码分析

• nexttick的参数中cb不能为可选参数，如果cb参数不传将没有回调函数，nextTick将没有意义，并且ctx将成为第一个参数，由于是形参，ctx将顶替cb但是ctx不是函数类型，就会抛错

依次执行nextTick

• 循环执行 callbacks 任务队列中的任务

function flushCallbacks() {//循环执行 callbacks  任务队列中的任务pending = falseconst copies = callbacks.slice(0)//callbacks.length = 0for (let i = 0; i < copies.length; i++) {// 依次执行callbacks数组中的函数copies[i]()}
}

源码

/* @flow */
/* globals MutationObserver */import { noop } from 'shared/util'
import { handleError } from './error'
import { isIE, isIOS, isNative } from './env'
// isIE 判段运行环境是否在ie浏览器
// isIOS 判断是否是ios
//isNative  判断函数是否是由JavaScript引擎原生实现的
export let isUsingMicroTask = false//是否使用微任务标志const callbacks = []//任务对列 调用nextTick时传入的回调函数组成的数组
let pending = false//初始化 是否在进行中状态  默认是false  function flushCallbacks() {//循环执行 callbacks  任务队列中的任务pending = falseconst copies = callbacks.slice(0)//callbacks.length = 0for (let i = 0; i < copies.length; i++) {// 依次执行callbacks数组中的函数copies[i]()}
}let timerFuncif (typeof Promise !== 'undefined' && isNative(Promise)) {// 向下兼容操作 如果支持Promise 则使用Promiseconst p = Promise.resolve()//直接返回一个resolved状态的Promise对象timerFunc = () => {p.then(flushCallbacks)// 在Promise的then方法中执行 flushCallbacks 函数if (isIOS) setTimeout(noop)//ios中在一些异常的webview中，promise结束后任务队列并没有刷新，所以强制执行setTimeout(noop)来刷新任务队列}isUsingMicroTask = true//重置使用微任务标示为true
} else if (!isIE && typeof MutationObserver !== 'undefined' && (isNative(MutationObserver) ||MutationObserver.toString() === '[object MutationObserverConstructor]'
)) {
// MutationObserver 属性支持，则使用MutationObserver let counter = 1const observer = new MutationObserver(flushCallbacks)// 创建一个MutationObserver 用于监听dom改动之后执行 flushCallbacks 函数 并赋值给 observerconst textNode = document.createTextNode(String(counter))// 创建一个文本节点observer.observe(textNode, {characterData: true})// 每次执行timeFunc都会让文本节点的内容在0/1之间切换timerFunc = () => {counter = (counter + 1) % 2textNode.data = String(counter)}// 切换之后将新值赋值到那个我们MutationObserver观测的文本节点上去isUsingMicroTask = true
} else if (typeof setImmediate !== 'undefined' && isNative(setImmediate)) {
// setImmediate 属性支持，则使用setImmediatetimerFunc = () => {setImmediate(flushCallbacks)}
} else {
// 以上都不支持，则使用 setTimeouttimerFunc = () => {setTimeout(flushCallbacks, 0)}
}export function nextTick(cb?: Function, ctx?: Object) {// cb 是 nextTick 包裹的执行函数// ctx 是函数执行的上下文 // console.log("nextTick000",cb,ctx)let _resolve//伪代码// 向 callbacks 数组中添加一个函数callbacks.push(() => {if (cb) {try {cb.call(ctx)//修改回调函数的this指向 } catch (e) {//  异常捕获 如果cb不是函数 抛出异常handleError(e, ctx, 'nextTick')}} else if (_resolve) {// 伪代码console.log('ctx')_resolve(ctx)}})// console.log("pendingcallbacks",callbacks,pending)if (!pending) {// console.log("pendingcallback0999",callbacks,pending)pending = truetimerFunc()}// $flow-disable-lineif (!cb && typeof Promise !== 'undefined') {//判断浏览器是否支持 Promise// cb 没有则抛出异常了不会走到这里// 伪代码return new Promise(resolve => {_resolve = resolve})}
}

个人困惑

• 本人实在是不太理解下列代码的意义是什么，感觉是没用的，但是不太确定，以下是个人分析

分析

• 首先将执行上下文this抛出是没什么意义的
• 其次promise的resolve 单独拿出来在此处有什么作用呢

 let _resolve//伪代码if (!cb && typeof Promise !== 'undefined') {//判断浏览器是否支持 Promise// cb 没有则抛出异常了不会走到这里// 伪代码return new Promise(resolve => {_resolve = resolve})}_resolve(ctx)

致谢

• 感谢您百忙之中抽时间阅读我写的博客，谢谢你的肯定，也希望对您能有所帮助
• 如果您有更好的见解请在评论区留言或者私聊我，期待与您的交流