Vue 中为什么要有nextTick?( 二 )

timerFunc函数定义 , 这里是根据当前环境支持什么方法则确定调用哪个 , 分别有:
Promise.then、MutationObserver、setImmediate、setTimeout
通过上面任意一种方法 , 进行降级操作
export let isUsingMicroTask = falseif (typeof Promise !== 'undefined' && isNative(Promise)) { //判断1:是否原生支持Promise const p = Promise.resolve() timerFunc = () => { p.then(flushCallbacks) if (isIOS) setTimeout(noop) } isUsingMicroTask = true} else if (!isIE && typeof MutationObserver !== 'undefined' && ( isNative(MutationObserver) || MutationObserver.toString() === '[object MutationObserverConstructor]')) { //判断2:是否原生支持MutationObserver 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 = https://www.huyubaike.com/biancheng/String(counter) } isUsingMicroTask = true} else if (typeof setImmediate !=='undefined' && isNative(setImmediate)) { //判断3:是否原生支持setImmediate timerFunc = () => { setImmediate(flushCallbacks) }} else { //判断4:上面都不行 , 直接用setTimeout timerFunc = () => { setTimeout(flushCallbacks, 0) }}无论是微任务还是宏任务 , 都会放到flushCallbacks使用
这里将callbacks里面的函数复制一份 , 同时callbacks置空
依次执行callbacks里面的函数
function flushCallbacks () {pending = false const copies = callbacks.slice(0) callbacks.length = 0 for (let i = 0; i < copies.length; i++) {copies[i]() }}四、最后总结

  1. 把回调函数放入callbacks等待执行
  2. 将执行函数放到微任务或者宏任务中
  3. 事件循环到了微任务或者宏任务 , 执行函数依次执行callbacks中的回调
点击关注 , 第一时间了解华为云新鲜技术~
【Vue 中为什么要有nextTick?】

经验总结扩展阅读