Vue 源码之 nextTick 解析

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