从 Event Loop 角度解读 Vue NextTick 源码

最新推荐文章于 2024-11-10 22:52:40 发布

前端小仙子

最新推荐文章于 2024-11-10 22:52:40 发布

阅读量851

点赞数 23

分类专栏：前端程序员文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/m0_60388216/article/details/136795985

版权

前端程序员专栏收录该内容

9 篇文章 0 订阅

订阅专栏

判断环境是否支持 Promise 并且 Promise 是否为原生。
使用 Promise 异步调用 flushCallbacks 函数。
当执行环境是 iPhone 等，使用 setTimeout 异步调用 noop ，iOS 中在一些异常的webview 中，promise 结束后任务队列并没有刷新所以强制执行 setTimeout 刷新任务队列。

MutationObserver 分支

else if (!isIE && typeof MutationObserver !== ‘undefined’ && (

isNative(MutationObserver) ||

// PhantomJS and iOS 7.x

MutationObserver.toString() === ‘[object MutationObserverConstructor]’

)) {

// Use MutationObserver where native Promise is not available,

// e.g. PhantomJS, iOS7, Android 4.4

// (#6466 MutationObserver is unreliable in IE11)

let counter = 1

const observer = new MutationObserver(flushCallbacks)

const textNode = document.createTextNode(String(counter))

observer.observe(textNode, {

characterData: true

})

timerFunc = () => {

counter = (counter + 1) % 2

textNode.data = String(counter)

}

isUsingMicroTask = true

}

复制代码

对非IE浏览器和是否可以使用 HTML5 新特性 MutationObserver 进行判断。
实例一个 MutationObserver 对象，这个对象主要是对浏览器 DOM 变化进行监听，当实例化 MutationObserver 对象并且执行对象 observe，设置 DOM 节点发生改变时自动触发回调。
把 timerFunc 赋值为一个改变 DOM 节点的方法，当 DOM 节点发生改变，触发 flushCallbacks 。（这里其实就是想用利用 MutationObserver 的特性进行异步操作）

setImmediate 分支

else if (typeof setImmediate !== ‘undefined’ && isNative(setImmediate)) {

// Fallback to setImmediate.

// Technically it leverages the (macro) task queue,

// but it is still a better choice than setTimeout.

timerFunc = () => {

setImmediate(flushCallbacks)

}

复制代码

判断 setImmediate 是否存在，setImmediate 是高版本 IE （IE10+）和 edge 才支持的。
如果存在，传入 flushCallbacks 执行 setImmediate 。

setTimeout 分支

else {

// Fallback to setTimeout.

timerFunc = () => {

setTimeout(flushCallbacks, 0)

}

复制代码

当以上所有分支异步 api 都不支持的时候，使用 macro task （宏任务）的 setTimeout 执行 flushCallbacks 。

执行降级

我们可以发现，给 timerFunc 赋值是一个降级的过程。为什么呢，因为 Vue 在执行的过程中，执行环境不同，所以要适配环境。

这张图便于我们更清晰的了解到降级的过程。

flushCallbacks 函数

function flushCallbacks () {

pending = false

const copies = callbacks.slice(0)

callbacks.length = 0

for (let i = 0; i < copies.length; i++) {

copiesi

}

复制代码

循环遍历，按照队列数据结构 “先进先出” 的原则，逐一执行所有 callback 。

小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！
因此收集整理了一份《2024年Web前端开发全套学习资料》送给大家，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。