了解 NextTick 源码及原理

为什么要使用nextTick

Vue.nextTick( [callback, context] )

• 参数：

  • {Function} [callback]
  • {Object} [context]

原理

Vue 在更新 DOM 时是异步执行的,当监听到数据发生变化时不会立即更新DOM,而是开启一个队列,缓存同一事件循环中发生的数据变化,把需要执行的回调添加到队列中,然后一起执行。

这可以减少操作DOM的次数，减少性能消耗。

用法

在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。

源码

export let isUsingMicroTask = false
//用于存放 调用 nextTick 时 传入的 回调函数
const callbacks = []
//添加任务为 true  任务执行为 false
let pending = false

// 多次调用 nextTick 后会以此执行下面的方法 然后把回调函数放在 callbacks 数组里
// 最后通过 flushCallbacks 函数遍历 callbacks 数组 执行其中的回调
function flushCallbacks() {
  pending = false
  const copies = callbacks.slice(0)   // 拷贝一份 callback
  callbacks.length = 0      // 清空callback
  for (let i = 0; i < copies.length; i++) {    //   遍历执行其中的回调
    copies[i]()
  }
}

let timerFunc
// 判断是否支持 promise
if (typeof Promise !== 'undefined' && isNative(Promise)) {
  const p = Promise.resolve()
  timerFunc = () => {
    // 用 Promise.resolve 把 flushCallbacks 变成一个异步微任务
    p.then(flushCallbacks)
    if (isIOS) setTimeout(noop)
  }
  // 标记当前 nextTick 使用的微任务
  isUsingMicroTask = true
  // 如果不支持 promise 就判断是否支持 MutationObserver
} else if (!isIE && typeof MutationObserver !== 'undefined' && (
    isNative(MutationObserver) ||
    MutationObserver.toString() === '[object MutationObserverConstructor]'
  )) {
  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
  // 判断是否支持 setImmediate
} else if (typeof setImmediate !== 'undefined' && isNative(setImmediate)) {
  timerFunc = () => {
    setImmediate(flushCallbacks)
  }
  // 如果都不支持 选择 setTimeout
} else {
  timerFunc = () => {
    setTimeout(flushCallbacks, 0)
  }
}

// 声明 nextTick 函数 接受 一个回调函数和一个上下文
export function nextTick(cb ? : Function, ctx ? : Object) {
  let _resolve
  // 把传入的回调存放到数组中 后面会遍历执行数组中的回调
  callbacks.push(() => {
    if (cb) { 
      try {
        cb.call(ctx)
      } catch (e) { 
        handleError(e, ctx, 'nextTick')
      }
    } else if (_resolve) {
      _resolve(ctx)
    }
  })
  // 如果没有在 pending 的回调 就执行 timerFunc 函数
  // 选择当前环境优先支持的异步方法
  if (!pending) {
    pending = true
    timerFunc()
  }
  // 如果没有回调函数 并且当前环境支持 promise 则返回一个promise 
  // 其中 promise.then 中DOM已经更新好了
  if (!cb && typeof Promise !== 'undefined') {
    return new Promise(resolve => {
      _resolve = resolve
    })
  }
}

总结

为了减少性能消耗,vue中nextTick通过对数据修改后的统一处理，减少DOM操作，在循环判断不同的异步操作请求完成函数回调，统一操作。