VUE逐点突破系列 -- nextTick实现原理

最新推荐文章于 2025-05-07 16:36:25 发布

前端彭于晏Eddie

最新推荐文章于 2025-05-07 16:36:25 发布

阅读量5.3k

点赞数

分类专栏： VUE 文章标签： vue js 前端

本文链接：https://blog.youkuaiyun.com/weixin_45495667/article/details/108873915

版权

VUE 专栏收录该内容

4 篇文章

订阅专栏

本文探讨Vue的nextTick机制，详细解释了Vue如何通过异步队列策略处理数据变更，避免频繁更新。在事件循环的下一个tick中，Vue会执行已去重的工作，源码中涉及Promise、MutationObserver和setTimeout等实现方式。文章通过分析nextTick的流程，展示了如何从数据修改到组件更新的过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

VUE逐点突破系列 – nextTick实现原理

vue有个批量、异步更新策略，数据变化时，vue开启一个队列，并缓冲在同一事件循环中发生的所有数据变更。如果同一个 watcher 被多次触发，只会被推入到队列中一次。然后在下一个的事件循环“tick”中，Vue 刷新队列并执行实际 (已去重的) 工作。Vue 在内部对异步队列尝试使用原生的 Promise.then、MutationObserver 和 setImmediate，如果执行环境不支持，则会采用 setTimeout(fn, 0) 代替。
源码中，修改一个数据，组件对应的watcher会尝试入队:

queue.push(watcher)

并使用nextTick方法添加一个flushSchedulerQueue回调

nextTick(flushSchedulerQueue)

flushSchedulerQueue被加入callbacks数组

callbacks.push(() => {
  if (cb) {
    try {
      cb.call(ctx) // cb就是加入的回调
    } catch (e) {
      handleError(e, ctx, 'nextTick')
    }
  } 
})

然后以异步方式启动

if (!pending) {
  pending = true
  timerFunc()
}

timerFunc的异步主要利用Promise等微任务方式实现

let timerFunc

if (typeof Promise !== 'undefined' && isNative(Promise)) {
  const p = Promise.resolve()
  // timerFunc利用p.then向微任务队列添加一个flushCallbacks
  // 会异步调用flushCallbacks
  timerFunc = () => {
    p.then(flushCallbacks)
  }
  isUsingMicroTask = true
}

flushCallbacks遍历callbacks，执行里面所有回调

function flushCallbacks () {
  pending = false
  const copies = callbacks.slice(0)
  callbacks.length = 0
  for (let i = 0; i < copies.length; i++) {
    copies[i]()
  }
}

其中就有前面加入的flushSchedulerQueue，它主要用于执行queue中所有watcher的run方法，从而使组件们更新

for (index = 0; index < queue.length; index++) {
  watcher = queue[index]
  watcher.run()
}