Vue源码阅读（27）：vm.$nextTick、Vue.nextTick 的源码解析

纷飞丿

已于 2024-03-13 23:21:46 修改

阅读量434

点赞数

分类专栏： vue源码阅读系列文章标签： vue.js javascript 源码

于 2021-09-08 18:11:24 首次发布

本文链接：https://blog.csdn.net/f18855666661/article/details/120101317

版权

vue源码阅读系列专栏收录该内容

35 篇文章 41 订阅

订阅专栏

我的开源库：

fly-barrage 前端弹幕库，项目官网：https://fly-barrage.netlify.app/，可实现类似于 B 站的弹幕效果，并提供了完整的 DEMO，Gitee 推荐项目；
fly-gesture-unlock 手势解锁库，项目官网：https://fly-gesture-unlock.netlify.app/，在线体验：https://fly-gesture-unlock-online.netlify.app/，可高度自定义锚点的数量、样式以及尺寸；

官方文档点击这里。

今天和大家讲讲 Vue 中的 vm.$nextTick 和 Vue.nextTick，这两个方法的底层实现是一样的，都是使用了名为 nextTick 的公共方法，看下面的源码。

声明 Vue 的原型函数 $nextTick，这个原型函数能够在 Vue 的实例上访问：

// src/core/instance/render.js
import {
  nextTick
} from '../util/index'

export function renderMixin (Vue: Class<Component>) {
  Vue.prototype.$nextTick = function (fn: Function) {
    return nextTick(fn, this)
  }
}

声明全局方法 nextTick：

// src/core/global-api/index.js
import {
  nextTick
} from '../util/index'

export function initGlobalAPI (Vue: GlobalAPI) {
  Vue.nextTick = nextTick
}

通过上面两处源码可以发现，这两个方法的内部都使用了 nextTick 这个方法，所以在下面的源码解析中，研究 nextTick 方法的源码即可，该函数定义在 src/core/util/next-tick.js 中。

通过 nextTick 方法，我们可以确保通过 nextTick 注册的回调函数在 DOM 更新完成之后执行，这样，我们就可以在回调函数中获取并操作更新完成的 DOM。这里需要重点关注的点是 "DOM 更新完成之后"，DOM 到底什么时候更新完成？Vue 中 DOM 的更新机制是什么？这些前置的知识点都需要在解析 nextTick 方法源码之前先搞清楚，只有这样我们才能理解 nextTick 方法的源码，所以接下来，先对这些前置知识点进行讲解。

1，前置知识

1-1，Vue 组件更新机制

在 Vue 中，Watcher 的监控级别是组件，组件中的任何一个状态发生变化，都会通知到对应的 Watcher 实例，这个 Watcher 实例再触发执行组件的重新渲染。也就是说，如果在一轮事件循环中有多个组件状态发生变化，则会多次触发组件的重新渲染机制。但事实上，Vue 对这一现象做了优化，一轮事件循环中多个状态发生变化，并不需要多次触发组件重新渲染，只要等这一轮事件循环组件状态都修改完成后，重新渲染组件一次即可。

Vue 的具体做法是在一次事件循环中将收到通知的 Watcher 实例存储到一个数组中，并且在添加 Watcher 实例的时候，先判断该 Watcher 实例是否已经存在于数组中，如果已经存在的话，则不会再次将 Watcher 实例存储到数组中。然后在下一次事件循环中，Vue 会触发数组中所有 Watcher 实例的组件重新渲染机制，然后清空数组。

从这里，可以发现，Vue 中的状态更新是同步的，而对应的组件重新渲染是异步的。

对应的源码如下所示：

// src/core/observer/watcher.js

export default class Watcher {

  /**
   * 如果 watcher 实例依赖的数据改变的话，update 方法将被执行
   */
  update () {
    if (this.lazy) {
      // lazy 属性为 true，说明当前的 watcher 实例是针对计算属性的，
      // 又因为依赖的数据发生了变化，此时需要将 dirty 设为 true
      this.dirty = true
    } else if (this.sync) {
      // 如果是同步 Watcher 的话，则立即执行 run 方法
      this.run()
    } else {
      // 如果当前的 watcher 实例不是立即触发的话，需要将当前的 watcher 实例
      // 添加到 watcher 缓存数组中
      queueWatcher(this)
    }
  }
}

在 update 方法中，会执行 queueWatcher(this) 将当前的 Watcher 实例缓存到数组中。

// src/core/observer/scheduler.js

const queue: Array<Watcher> = []

/**
 * 执行 queue 数组中 watcher 实例的 run 方法，触发执行完之后，会对 queue 数组进行清空操作
 */
function flushSchedulerQueue () {
  ......
}

/**
 * 添加一个 watcher 实例到 watcher 队列中
 * 如果某一个 watcher 已经被保存到队列中的话，将不会再进行 push 操作。（一个渲染 watcher 有可能监控
 * 多个数据，每个数据的改变都会使代码执行到这里，但其实只需要保存一次该渲染 watcher 即可）
 */
/**
 * 该函数借助 flushing 和 waiting 变量实现流程的控制
 */
export function queueWatcher (watcher: Watcher) {
  // 根据 watcher 的 id 判断这个 watcher 实例有没有保存到队列中，只有没有被缓存的 watcher 实例才会进行接下来的操作
  const id = watcher.id
  if (has[id] == null) {
    has[id] = true
    // 如果当前的队列不是刷新状态的话
    if (!flushing) {
      // 直接将 watcher push 到队列中即可
      queue.push(watcher)
    } else {
      // 如果当前正在进行刷新 watcher 队列，此时需要将当前的 watcher 插入到队列中合适的位置（按照 watcher 的 id 从小到大排列）
      let i = queue.length - 1
      while (i > index && queue[i].id > watcher.id) {
        i--
      }
      queue.splice(i + 1, 0, watcher)
    }
    // 如果当前不是等待状态的话，将 waiting 设为 true，在下一个 tick 执行清空并更新 watcher 的操作
    // 借助 waiting 变量控制 watcher 队列的清空执行，在同一时刻，只能有一个 flushSchedulerQueue 正在等待（下一个 tick）执行或者正在执行
    // 只有当前时刻，没有 flushSchedulerQueue 正在等待执行或者正在执行，才会执行 nextTick(flushSchedulerQueue)
    if (!waiting) {
      waiting = true
      // 调用 nextTick 方法，将 flushSchedulerQueue 函数放到任务队列中
      nextTick(flushSchedulerQueue)
    }
  }
}

queueWatcher 方法主要做的事是将 Watcher 实例存到 queue 数组中，并将 flushSchedulerQueue 函数放到任务队列中。flushSchedulerQueue 函数的作用是触发执行 queue 数组中 Watcher 实例的 run 方法，这会进而触发对应组件的重新渲染。在这里，需要重点关注的点是 queueWatcher 函数是借助 nextTick 方法，将 flushSchedulerQueue 函数放到任务队列中的，这个 nextTick 方法就是我们本节要解析的方法。

因此，本小节得到如下结论：

组件中的状态更新是同步的，组件的重新渲染是异步的。
能够触发执行组件重新渲染的 flushSchedulerQueue 函数借助 nextTick 方法被放置到了任务队列中。
nextTick 方法能够将传递给他的函数放置到任务队列中，nextTick 方法的本质就是做这么一件事，并没有什么神奇的。

引申思考：nextTick 方法的本质是将传递给他的函数放置到任务队列中，那么它是如何实现在下次 DOM 更新循环结束之后执行延迟回调的呢？

答：相信看了上面的内容，小伙伴们已经有答案了，那是因为能够触发组件重新渲染的 flushSchedulerQueue 函数也是通过 nextTick 方法放置到任务队列中的，那么我们只要确保 flushSchedulerQueue 函数在任务队列中的位置在我们通过 nextTick 注册的函数所在位置的前面，就能够确保在我们注册的回调函数中能够获取最新的 DOM 元素了，也就是先修改数据，后使用 nextTick 注册回调。

又问：如果我先使用 nextTick 注册回调，后修改数据，在我们注册的回调中，还能获取到最新的 DOM 元素吗？

答：答案是显而易见的，我们无法在注册的回调中获取到最新的 DOM 元素，因为在任务队列中，我们注册的回调函数在前面，flushSchedulerQueue 函数在后面。所以，我们注册的回调函数先执行，而此时，组件还没有重新渲染，因此无法获取到最新的 DOM 元素。由此看来，官网中所描述的 nextTick 能够获取到最新的 DOM 元素，更像是事件循环所产生的副作用。

1-2，事件循环

JavaScript 事件循环的知识点可以看这篇文章，我就不赘述了。

2，nextTick 方法的源码解析

上文说 nextTick 方法能够将传递的函数放到任务队列中，其实这么说是不严谨的，因为其内部并没有直接将传递的函数放到任务队列，而是将传递的函数存储到一个名为 callbacks 的数组中。真正被放置到任务队列中的是一个名为 flushCallbacks 的函数，该函数的作用是遍历 callbacks 数组，并执行其中的每一个回调函数，并且还有清空 callbacks 数组的操作。

nextTick 方法的源码如下所示。

// 存储回调函数的数组
const callbacks = []
let pending = false

// 能够将 flushCallbacks 作为回调函数添加到微任务队列中的函数
let microTimerFunc
// 能够将 flushCallbacks 作为回调函数添加到宏任务队列中的函数
let macroTimerFunc
// nextTick 方法的默认实现是使用 microTimerFunc（微任务队列）
let useMacroTask = false

/**
 * nextTick 有两种用法：
 * Vue.nextTick(function () {
 *   // DOM 更新了
 * })
 *
 * nextTick() 函数不传入回调函数的话，就使用 Promise 的形式
 * Vue.nextTick()
 *    .then(function () {
 *      // DOM 更新了
 *    })
 */
export function nextTick (cb?: Function, ctx?: Object) {
  // _resolve 变量是用于处理 Promise 情形的
  let _resolve
  // 将回调函数包装一层，保存到 callbacks 数组中
  // 使用包装函数的原因是：(1) Vue 可以在包装函数中对 cb 回调函数添加一些 try catch 的代码，使代码更加的健壮
  //                     (2) 如果没有传递 cb 回调函数的话，还可以提供 Promise 的形式
  callbacks.push(() => {
    if (cb) {
      try {
        cb.call(ctx)
      } catch (e) {
        handleError(e, ctx, 'nextTick')
      }
    // 下面的代码是给 Promise 用的
    } else if (_resolve) {
      _resolve(ctx)
    }
  })
  // 借助 pending 这个变量，可以确保在执行 flushCallbacks 前，if 里面的逻辑只执行一次，
  // 也就是确保在一次事件循环中只向任务队列中添加一个任务。
  // if 代码块中的逻辑，用于根据 useMacroTask 变量，将 flushCallbacks 函数是放在微任务队列中，还是宏任务队列中。
  if (!pending) {
    pending = true
    if (useMacroTask) {
      macroTimerFunc()
    } else {
      microTimerFunc()
    }
  }
  // 下面的代码是给 Promise 用的
  // $flow-disable-line
  if (!cb && typeof Promise !== 'undefined') {
    // 如果没有传递 cb 回调函数，并且 Promise 可以使用的话，就返回一个 Promise，在代码的外面可以使用 nextTick().then(()=>{}) 的形式
    // 这里最为精髓的一点是：将返回的 Promise 的 resolve 函数赋值给 _resolve，将 resolve Promise 的抓手交给了包装函数
    // 这样的话：在下一个 tick 执行包装函数的时候，就会 resolve 这个 Promise，进而执行 nextTick().then(()=>{}) .then() 中的函数
    return new Promise(resolve => {
      _resolve = resolve
    })
  }
}

2-1，传递的函数被包装了一层，然后保存到 callbacks 数组中

export function nextTick (cb?: Function, ctx?: Object) {
  // _resolve 变量是用于处理 Promise 情形的
  let _resolve
  // 将回调函数包装一层，保存到 callbacks 数组中
  // 使用包装函数的原因是：(1) Vue 可以在包装函数中对 cb 回调函数添加一些 try catch 的代码，使代码更加的健壮
  //                     (2) 如果没有传递 cb 回调函数的话，还可以提供 Promise 的形式
  callbacks.push(() => {
    if (cb) {
      try {
        cb.call(ctx)
      } catch (e) {
        handleError(e, ctx, 'nextTick')
      }
    // 下面的代码是给 Promise 用的
    } else if (_resolve) {
      _resolve(ctx)
    }
  })

  ......
  ......

// 下面的代码是给 Promise 用的
  // $flow-disable-line
  if (!cb && typeof Promise !== 'undefined') {
    // 如果没有传递 cb 回调函数，并且 Promise 可以使用的话，就返回一个 Promise，在代码的外面可以使用 nextTick().then(()=>{}) 的形式
    // 这里最为精髓的一点是：将返回的 Promise 的 resolve 函数赋值给 _resolve，将 resolve Promise 的抓手交给了包装函数
    // 这样的话：在下一个 tick 执行包装函数的时候，就会 resolve 这个 Promise，进而执行 nextTick().then(()=>{}) .then() 中的函数
    return new Promise(resolve => {
      _resolve = resolve
    })
  }
}

/**
 * nextTick() 函数不传入回调函数的话，就使用 Promise 的形式
 * Vue.nextTick()
 *    .then(function () {
 *      // DOM 更新了
 *    })
 */

首先将传递进来的 cb 函数包装了一层，然后 push 到 callbacks 数组中，包装一层函数的好处主要有如下两点：

可以在包装函数中添加 try catch 的代码，使代码更加健壮。
如果没有传递 ch 函数的话，说明用户想要的是 Promise 的形式，此时应该在包装函数中执行 _resolve 函数，_resolve 函数看最后几行代码。如果用户没有传递 ch 函数并且当前的浏览器支持 Promise 的话，则返回一个 Promise 实例，并将这个 Promise 实例的 resolve 函数赋值给 _resolve 变量。这样，当包装函数执行的时候，就会执行 _resolve 函数，使得返回的 Promise 实例变成 fulfilled 状态，进而执行 Vue.nextTick().then(function(){}) 中的回调函数。

2-2，向事件队列中添加 flushCallbacks 函数

export function nextTick (cb?: Function, ctx?: Object) {
  ......
  ......

  // 借助 pending 这个变量，可以确保在执行 flushCallbacks 前，if 里面的逻辑只执行一次，
  // 也就是确保在一次事件循环中只向任务队列中添加一个任务。
  // if 代码块中的逻辑，用于根据 useMacroTask 变量，将 flushCallbacks 函数是放在微任务队列中，还是宏任务队列中。
  if (!pending) {
    pending = true
    if (useMacroTask) {
      macroTimerFunc()
    } else {
      microTimerFunc()
    }
  }

  ......
  ......
}

pending 变量用于确保在一次事件循环中，最多向事件队列添加一次 flushCallbacks 函数。

接下来会根据 useMacroTask 变量的真假值来决定是将 flushCallbacks 函数添加到微任务队列中，还是添加到宏任务队列中。添加到宏任务队列需要执行 macroTimerFunc 方法，添加到微任务队列需要执行 microTimerFunc 方法。这里，大家也许会有疑问，为什么有时会将 flushCallbacks 函数添加到宏任务队列中呢？每次都添加到微任务队列中不行吗？Vue 这么做的原因是微任务队列中的函数执行优先级太高了，在某些情况下甚至会比事件冒泡还要快，这会导致一些非常诡异的 bug，例如：#4521、#6566，但如果全都放到宏任务队列中的话，对一些有重绘和动画的场景也会有性能影响，例如：#6813。所以最终 nextTick 采取的策略是默认都走微任务队列，只有对一些 DOM 交互事件，如 v-on 绑定的事件回调函数的处理，会强制走 macro task，与这部分有关的源码如下所示。

src/core/util/next-tick.js >>> withMacroTask()，源码解析看注释。

/**
 * withMacroTask 函数的作用是：给 fn 回调函数做一层包装，保证 fn 函数在执行的过程中，如果修改了状态，
 * 那么更新 DOM 的操作会被推到宏任务队列中。
 */
export function withMacroTask (fn: Function): Function {
  return fn._withTask || (fn._withTask = function () {
    useMacroTask = true
    const res = fn.apply(null, arguments)
    useMacroTask = false
    return res
  })
}

src/platforms/web/runtime/modules/events.js >>> add()，源码解析看注释。

// DOM 绑定事件的方法
function add (
  event: string,
  handler: Function,
  once: boolean,
  capture: boolean,
  passive: boolean
) {
  // 使用 withMacroTask 对 handler 包装一层
  handler = withMacroTask(handler)
  // 如果事件绑定使用了 .once 的话，则给 handler 加一层包装
  if (once) handler = createOnceHandler(handler, event, capture)
  // 这里只是调用浏览器提供的 API --- node.addEventListener 绑定事件
  // target 就是使用了 v-on 指令的 DOM 元素
  target.addEventListener(
    event,
    handler,
    supportsPassive
      ? { capture, passive }
      : capture
  )
}

2-3，macroTimerFunc()、microTimerFunc()

详细解释在注释中，看注释即可理解。

// 能够将 flushCallbacks 作为回调函数添加到微任务队列中的函数
let microTimerFunc
// 能够将 flushCallbacks 作为回调函数添加到宏任务队列中的函数
let macroTimerFunc

// 根据运行环境的支持情况，给 microTimerFunc 和 macroTimerFunc 不同的实现
/ macroTimerFunc 函数的实现 /
// macroTimerFunc 优先使用 setImmediate，但是 setImmediate 存在兼容性问题，
// 所以使用 MessageChannel 作为备选方案，如果 MessageChannel 也不支持的话，
// 则最终使用 setTimeout 将回调函数添加到宏任务队列中。
if (typeof setImmediate !== 'undefined' && isNative(setImmediate)) {
  macroTimerFunc = () => {
    setImmediate(flushCallbacks)
  }
} else if (typeof MessageChannel !== 'undefined' && (
  isNative(MessageChannel) ||
  // PhantomJS
  MessageChannel.toString() === '[object MessageChannelConstructor]'
)) {
  const channel = new MessageChannel()
  const port = channel.port2
  channel.port1.onmessage = flushCallbacks
  macroTimerFunc = () => {
    port.postMessage(1)
  }
} else {
  /* istanbul ignore next */
  macroTimerFunc = () => {
    setTimeout(flushCallbacks, 0)
  }
}

/ microTimerFunc 函数的实现 /
// 如果当前浏览器支持 Promise 的话，则借助 Promise 将 flushCallbacks 放到微任务队列
// 如果不支持 Promise 的话，则添加微任务队列会被降级成添加到宏任务队列中。
if (typeof Promise !== 'undefined' && isNative(Promise)) {
  const p = Promise.resolve()
  microTimerFunc = () => {
    p.then(flushCallbacks)
  }
} else {
  // fallback to macro
  microTimerFunc = macroTimerFunc
}

2-4，flushCallbacks() 函数

flushCallbacks() 函数的作用很简单，就是遍历执行 callbacks 数组中的函数，并且还有清空 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]()
  }
}

3，结语

ok，到这里，nextTick 的源码就解析完了，下一篇文章我们说说 Vue.extend()。

纷飞丿

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Vue源码阅读（27）：vm.$nextTick、Vue.nextTick 的源码解析

官方文档点击这里。今天和大家讲讲 Vue 中的 vm.$nextTick 和 Vue.nextTick，这两个方法的底层实现是一样的，都是使用了名为 nextTick 的公共方法，看下面的源码。声明 Vue 的原型函数 $nextTick，这个原型函数能够在 Vue 的实例上访问：// src/core/instance/render.jsimport { nextTick} from '../util/index'export function renderMixin (Vu.
复制链接

扫一扫