公众号:需要以下pdf,关注下方
2023已经过完了,让我们来把今年的面试题统计号,来备战明年的金三银四!所以,不管你是社招还是校招,下面这份前端面试工程师高频面试题,请收好。
前言
nextTick
是 Vue 的一个核心实现,$nextTick
方法将回调延迟到下次DOM更新循环之后执行。Vue 的 nextTick 其本质是对 JavaScript 执行原理 EventLoop 的一种应用。
nextTick 的核心是利用了如 Promise 、MutationObserver、setImmediate、setTimeout的原生 JavaScript 方法来模拟对应的微/宏任务的实现,本质是为了利用 JavaScript 的这些异步回调任务队列来实现 Vue 框架中自己的异步回调队列
前置知识 - js事件循环
JS 运行机制
JS 执行是单线程的,基于事件循环。事件循环大致分为以下步骤:
- 所有同步任务都在主线程上执行,形成一个执行栈。
- 异步任务放进任务队列,异步任务分为宏任务和微任务
- 执行栈所有同步任务执行完成,就会执行任务队列。对应的异步任务,结束等待状态,进入执行栈,开始执行。
- 主线程不断重复上面的第三步。
主线程的执行过程就是一个 tick,而所有的异步结果都是通过 “任务队列” 来调度。 消息队列中存放的是一个个的任务(task)。 task 分为两大类,分别是 macro task 和 micro task,并且每个 macro task(宏任务) 结束后,都要清空所有的 micro task(微任务)。
如图所示
for (macroTask of macroTaskQueue) {// 执行宏任务handleMacroTask();// 执行所有微任务for (microTask of microTaskQueue) {handleMicroTask(microTask);}
}
宏任务
: script、setTimeout、setInterval、Node中的setImmediate 等微任务
: Promise.then、MutationObserver、Node 中的 Process.nextTick等
nextTick的具体实现原理
上源码
源码分为两部分,一是判断当前环境能使用的 API
并保存异步函数,二是调用异步函数执行回调队列
timerFunc
函数定义,根据当前环境支持什么方法则确定调用哪个,分别有:
Promise.then`、`MutationObserver`、`setImmediate`、`setTimeout
通过上面任意一种方法,进行降级操作
export let isUsingMicroTask = false
const callbacks = [] // 回调队列
let pending = false// 该方法执行队列中的全部回调
function flushCallbacks () {pending = falseconst copies = callbacks.slice(0)callbacks.length = 0// 执行任务队列for (let i = 0; i < copies.length; i++) {copies[i]()}
}
let timerFunc // 用来保存调用异步任务方法
// 判断1:是否原生支持Promise
if (typeof Promise !== 'undefined' && isNative(Promise)) {// 保存一个异步任务const p = Promise.resolve()timerFunc = () => {// 执行回调函数p.then(flushCallbacks)if (isIOS) setTimeout(noop)}isUsingMicroTask = true
} else if (!isIE && typeof MutationObserver !== 'undefined' && (isNative(MutationObserver) ||MutationObserver.toString() === '[object MutationObserverConstructor]'
)) {// 判断2:是否原生支持MutationObserverlet counter = 1const observer = new MutationObserver(flushCallbacks)const textNode = document.createTextNode(String(counter))observer.observe(textNode, {characterData: true})timerFunc = () => {counter = (counter + 1) % 2textNode.data = String(counter)}isUsingMicroTask = true
} else if (typeof setImmediate !== 'undefined' && isNative(setImmediate)) {//判断3:是否原生支持setImmediattimerFunc = () => {setImmediate(flushCallbacks)}
} else {//判断4:上面都不行,直接用setTimeouttimerFunc = () => {setTimeout(flushCallbacks, 0)}
}
export function nextTick(cb?: Function, ctx?: Object) {let _resolve;
// cb 回调函数会经统一处理压入 callbacks 数组callbacks.push(() => {if (cb) {try {cb.call(ctx);} catch (e) {handleError(e, ctx, 'nextTick');}} else if (_resolve) {_resolve(ctx);}});
// 执行异步延迟函数 timerFuncif (!pending) {pending = true;timerFunc();}
// 当 nextTick 没有传入函数参数的时候,返回一个 Promise 化的调用if (!cb && typeof Promise !== 'undefined') {return new Promise(resolve => {_resolve = resolve;});}
}
callbacks
就是异步操作队列
callbacks
新增回调函数后又执行了timerFunc
函数,pending
是用来标识同一个时间只能执行一次
function flushCallbacks () {pending = falseconst copies = callbacks.slice(0)callbacks.length = 0for (let i = 0; i < copies.length; i++) {copies[i]()}
}
把回调函数放入callbacks等待执行,将执行函数放到微任务或者宏任务中 无论是微任务还是宏任务,都会放到flushCallbacks
使用,这里将callbacks
里面的函数复制一份,同时callbacks
置空
循环遍历执行callbacks
里面的函数
总结
- Vue 的 nextTick 其本质是对 JavaScript 执行原理 EventLoop 的一种应用
- nextTick核心是利用了如 Promise 、MutationObserver、setImmediate、setTimeout的原生 JavaScript 方法来模拟对应的微/宏任务的实现,根据当前环境支持什么方法则确定调用哪个
原文链接:https://juejin.cn/post/7314493016497684520