Vue 源码之 nextTick 解析

最新推荐文章于 2024-04-14 22:01:09 发布

薛定谔的panda

最新推荐文章于 2024-04-14 22:01:09 发布

阅读量441

点赞数 2

分类专栏： Vue 文章标签： vue nextTick 事件循环 vue源码任务队列

本文链接：https://blog.csdn.net/u014168594/article/details/84959370

版权

Vue 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

本文探讨了Vue框架中的nextTick实现，详细解释了其如何利用微任务和宏任务来确保在DOM更新后的回调执行。文章提及了不同环境下的延迟策略，如setTimeout、MessageChannel和Promise.then，并分析了callbacks队列和flushCallbacks执行函数。通过阅读Vue的src/core/util/next-tick.js源码，读者可以深入了解Vue的更新机制。

摘要由CSDN通过智能技术生成

Vue 源码之 nextTick 解析

最近在看 Vue 源码，一直很好奇这个 nextTick 怎么实现。

本文涉及微任务和宏任务，不熟悉的可以看我之前的博客：https://blog.csdn.net/u014168594/article/details/83510281

在浏览器环境中，常见的 macro task 有 setTimeout、MessageChannel、postMessage、setImmediate。而常见的 micro task 有 MutationObsever 和 Promise.then。

setImmediate 有点类似于 setTimeout，属于 IE 浏览器特性，这里不展开细讲。

MessageChannel 允许我们创建一个新的消息通道，并通过它的两个MessagePort属性发送数据，有兴趣可自行查找。

源码位置 src/core/util/next-tick.js

任务队列源码：

const callbacks = []
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]()
  }
}

callbacks 存放将要执行的任务队列，包装成函数 flushCallbacks 来执行

macro task 延迟实现的源码：

let macroTimerFunc	//宏任务函数

if (typeof setImmediate !== 'undefined' && isNative(setImmediate)) {  //判断是否支持 setImmediate	
  macroTimerFunc = () => {
    setImmediate(flushCallbacks)
  }
} else if (typeof MessageChannel !== 'undefined' && (	
  isNative(MessageChannel) ||
  MessageChannel.toString() === '[object MessageChannelConstructor]'
)) {		//判断是否支持 MessageChannel
  const channel = new MessageChannel()
  const port = channel.port2
  channel.port1.onmessage = flushCallbacks
  macroTimerFunc = () => {
    port.postMessage(1)
  }
} else {	//使用 setTimeout
  macroTimerFunc = () => {
    setTimeout(flushCallbacks, 0)
  }
}

先判断支不支持 setImmediate，不支持的话再去检测是否支持 MessageChannel，也不支持的话就用 setTimeout 0

micro task 延迟实现的源码：

let microTimerFunc	//微任务函数

if (typeof Promise !== 'undefined' && isNative(Promise)) {	//是否支持 Promise
  const p = Promise.resolve()
  microTimerFunc = () => {
    p.then(flushCallbacks)
    //添加一个空计时器“强制”刷新微任务队列
    //有些 webview 虽然会返回回调到微任务队列，但是队列不刷新
    if (isIOS)	setTimeout(noop)	
  }
} else {
  microTimerFunc = macroTimerFunc
}

先判断是否支持 Promise，使用 Promise 进行微任务的延迟，不支持就直接用宏任务延迟。

nextTick 函数实现源码：

export function nextTick (cb?: Function, ctx?: Object) {	
  //传入函数 cb ，需要执行的函数
  //传入对象 ctx ，为执行函数的上下文环境
  let _resolve
  callbacks.push(() => {
    if (cb) {	//如果存在执行函数，将需要执行的函数执行环境绑定在该函数上下文环境内
      try {
        cb.call(ctx)
      } catch (e) {
        handleError(e, ctx, 'nextTick')
      }
    } else if (_resolve) {
      _resolve(ctx)
    }
  })
  if (!pending) {	//判断是否正在执行，防止同一个队列执行多次
    pending = true
    if (useMacroTask) {	//标志位，根据不同场景触发宏任务或者微任务
      macroTimerFunc()
    } else {
      microTimerFunc()
    }
  }
  if (!cb && typeof Promise !== 'undefined') {	//刷新微队列
    return new Promise(resolve => {
      _resolve = resolve
    })
  }
}