Vue中nextTick的原理

Vue中会用到一个nextTick()的方法，在Vue实例中更改数据之后需要改动DOM，如果需要操作更新后的DOM，就要使用nextTick()，确保内部的函数是在下一轮循环中才会执行。

官网的定义如下：

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

Vue.nextTick

nextTick使用方法有回调和Promise两种，更常见的是在实例调用this.$nextTick(() => {回调方法})。

浅谈nextTick原理

在项目文件夹中，可以找到nextTick源码，具体地址是node_modules\vue\src\core\util\next-tick.js，代码不长，添加自己理解的备注后代码如下：

import { noop } from 'shared/util'
// 错误处理函数
import { handleError } from './error'
// 是否是IE、IOS、内置函数
import { isIE, isIOS, isNative } from './env'
// 使用微任务标识符
export let isUsingMicroTask = false
// 存回调函数的数组
const callbacks = []
// pending 是一个标识符，
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]()
  }
}
// 根据下面的判断来给timerFunc定义
let timerFunc
// 首先第一顺位是使用Promise实现延迟回调，并且判断是否是原生Promise
if (typeof Promise !== 'undefined' && isNative(Promise)) {
  const p = Promise.resolve()
  // 将timerFunc定义为Promise，并且延迟通过lushCallbacks执行所有回调
  timerFunc = () => {
    p.then(flushCallbacks)
    if (isIOS) setTimeout(noop)
  }
  // 设置使用微任务标识符 因为Promise.then()是一个微任务
  isUsingMicroTask = true
} else if (!isIE && typeof MutationObserver !== 'undefined' && (
  isNative(MutationObserver) ||
  MutationObserver.toString() === '[object MutationObserverConstructor]'
))
 // 当不是原生Promise时，第二顺位是使用MutationObserver API
 {
  // 
  let counter = 1
  // 创建MutationObserver，用于监听DOM变化，并且执行flushCallbacks函数
  const observer = new MutationObserver(flushCallbacks)
  // 设置一个观测节点
  const textNode = document.createTextNode(String(counter))
  // 将观测节点设置为观察目标的改变
  observer.observe(textNode, {
    characterData: true
  })
  // 定义timerFunc
  timerFunc = () => {
    // counter会在0/1之间切换 
    counter = (counter + 1) % 2
    // 并且将新counter写入到观测节点，这个数值的变化就会触发MutationObserver的检测，从而触发回调执行
    textNode.data = String(counter)
  }
  isUsingMicroTask = true
} else if (typeof setImmediate !== 'undefined' && isNative(setImmediate))
 {
  // 当Promise和MutationObserver，都无法使用时，用setImmediate定时器，这里就算宏任务了 
  timerFunc = () => {
    setImmediate(flushCallbacks)
  }
} else {
  // 上面三种情况都不可时候用的时候，就用最普通的定时器，宏任务切换到下一次循环 
  timerFunc = () => {
    setTimeout(flushCallbacks, 0)
  }
}
// 实际暴露出去的函数
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 为false 说明本轮事件循环中没有执行过timerFunc()
  if (!pending) {
    pending = true
    timerFunc()
  }
  // 如果没传入cb回调函数，就自动创建个Promise
  if (!cb && typeof Promise !== 'undefined') {
    return new Promise(resolve => {
      _resolve = resolve
    })
  }
}

代码整体是好理解的，具体实现异步的方法顺位是Promise > MutationObserver > setImmediate > setTimeout，就是使用这4种方法，包裹callback函数，使得callback可以异步执行，其中MutationObserver是HTML5中添加，用于监视DOM变动的接口，它可以监听一个DOM对象上发生的子节点删除、属性修改、文本内容修改等。

最后编辑于：2020.12.20 14:59:40