从 Event Loop 角度解读 Vue NextTick 源码(1)，jsp课程设计选题-CSDN博客

本文链接：https://blog.csdn.net/2401_84181577/article/details/137504454

本文详细解释了Vue的nextTick方法如何利用eventloop实现异步更新，并探讨了JavaScript中的eventloop机制，包括宏任务和微任务的执行顺序。作者还分享了nextTick在定位bug和Vue应用中的重要性，以及它在面试中的常见考察点。

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

在学习 vue 源码，nextTick 方法借助了浏览器的 event loop 事件循环做到了异步更新。
在公司面试的时候，笔试题最喜欢出关于 JavaScript 运行机制，Promise/A+ 等关于 event loop 线程的题目。
学会 nextTick 原理帮助定位 BUG , 使用 Vue 会更加灵活。

什么是 event loop

先看一张图（来自 mr.z 大佬）

先执行同步阻塞任务，同步任务会等待上一个执行完毕以后执行下一个，当同步任务执行完毕，再执行异步任务，遇到异步任务会将异步任务的回调函数注册在异步任务队列里。注意，如果主线程上没有同步任务会直接调用异步任务的微任务。
执行宏任务，遇到微任务将都添加到微任务队列里。
开始执行微任务队列，当宏任务执行完后执行微任务队列，直到微任务队列全部执行完，微任务队列为空。
执行宏任务，如果在执行宏任务期间有微任务，将微任务添加到微任务队列里，执行完宏任务之后执行微任务，直到微任务队列全部执行完。
继续执行宏任务队列。

重复2, 3, 4，5……直到宏微任务为空。

$nextTick 的实现原理

从字面意思理解，next 下一个，tick 滴答（钟表）来源于定时器的周期性中断（输出脉冲），一次中断表示一个 tick，也被称做一个“时钟滴答”），nextTick 顾名思义就是下一个时钟滴答。看源码，在 Vue 2.x 版本中，nextTick 在 src\core\util 中的一个单独的文件 next-tick.js ，可见 nextTick 的重要性，虽然短短 200 多行，尤大却单独创建一个文件去维护。

接下来我们来看整个文件。

声明了三个全局变量，callbacks: [] ，pending: Boolean，timerFunc: undefined。
声明了一个函数 flushCallbacks。
一堆 **if，else if **判断。
抛出了一个函数 nextTick。

nextTick 函数

声明一个局部变量 _resolve 。
把所有回调函数压进 callbacks 中，以栈的形式的存储所有 callback。
当 pending 为 false 时，执行 timerFunc 函数。
当没有 callback 的时候，返回一个 Promise 的调用方式，可以用 .then 接收。

timerFunc 函数

我们开始说了，timerFunc 为全局变量，现在调用 timerFunc ，timerFunc 是什么时候被赋值为一个函数，并且函数里执行代码又是什么？

我们看到，这段判断代码总共有四个分支，四个分支里对 timerFunc 有不同的赋值，我们先来看第一个分支。

Promise 分支

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

const p = Promise.resolve()

timerFunc = () => {

p.then(flushCallbacks)

// In problematic UIWebViews, Promise.then doesn’t completely break, but

// it can get stuck in a weird state where callbacks are pushed into the

// microtask queue but the queue isn’t being flushed, until the browser

// needs to do some other work, e.g. handle a timer. Therefore we can

// “force” the microtask queue to be flushed by adding an empty timer.

if (isIOS) setTimeout(noop)

}

isUsingMicroTask = true

}

复制代码

判断环境是否支持 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 节点发生改变时自动触发回调。

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

深知大多数同学面临毕业设计项目选题时，很多人都会感到无从下手，尤其是对于计算机专业的学生来说，选择一个合适的题目尤为重要。因为毕业设计不仅是我们在大学四年学习的一个总结，更是展示自己能力的重要机会。

因此收集整理了一份《2024年计算机毕业设计项目大全》，初衷也很简单，就是希望能够帮助提高效率，同时减轻大家的负担。