vue $nextTick()方法实现原理(1)

2.pending：用来标志是否正在执行回调函数

3.timerFunc：用来触发执行回调函数

具体逻辑

---

当调用nextTick方法时会传入两个参数，回调函数和执行回调函数的上下文环境，如果没有提供回调函数，那么将返回promise对象。首先将拿到的回调函数存放到数组中，判断是否正在执行回调函数，如果当前没有在pending的时候，就会执行timeFunc，多次执行nextTick只会执行一次timerFunc，timeFunc其实就是执行异步的方法，在timeFunc方法中选择一个异步方法（首先判断是否支持promise，如果支持就将flushCallbacks放在promise中异步执行，并且标记使用微任务。如果不支持promise就看是否支持MutationObserver方法，如果支持就new了一个MutationObserver类，创建一个文本节点进行监听，当数据发生变化了就会异步执行flushCallbacks方法。如果以上两个都不支持就看是否支持setImmediate方法，如果支持setImmediate 就去异步执行flushCallbacks方法。如果以上三种方法都不支持，就使用setTimeout），然后异步去执行flushCallbacks方法，flushCallbacks中就是将传递的函数依次执行。

nextTick多次调用会维持一个数组，之后会异步的把数组中的方法以此执行，这样的话用户就会在视图更新之后再获取到真实的dom元素。

源码：

---

1.nextTick

export function nextTick (cb?: Function, ctx?: Object) {

let _resolve

callbacks.push(() => { // 将拿到的回调函数存放到数组中

if (cb) {

try { // 错误捕获

cb.call(ctx)

} catch (e) {

handleError(e, ctx, ‘nextTick’)

}

} else if (_resolve) {

_resolve(ctx)

}

})

if (!pending) { // 如果当前没有在pending的时候，就会执行timeFunc

pending = true

timerFunc() // 多次执行nextTick只会执行一次，timerFunc就是一个异步方法

}

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

return new Promise(resolve => {

_resolve = resolve

})

}

}

//

2.flushCallbacks

const callbacks = [] // 回调函数集合

let pending = false

function flushCallbacks () { // 多个nextTick中传递的回调函数依次执行

pending = false

const copies = callbacks.slice(0)

callbacks.length = 0

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

copiesi

}

}

//flushCallbacks中会将函数备份一份，之所以要slice复制一份出来是因为有的cb执行过程中又会往callbacks中加入内容

//比如$nextTick的回调函数里又有$nextTick，那么这些应该放入到下一个轮次的nextTick去执行

//所以拷贝一份，遍历完成即可，防止一直循环下去。

3.timeFunc是一个异步方法

// 判断当前浏览器是否支持promise

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

const p = Promise.resolve()

timerFunc = () => { // flushCallbacks就包裹了一个promise

p.then(flushCallbacks) // 异步的去执行flushCallbacks

if (isIOS) setTimeout(noop)

}

isUsingMicroTask = true // 标记了一下使用的是微任务

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

isNative(MutationObserver) ||

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

)) {

// 如果不是IE，并且支持原生的MutationObserver，也是一个微任务

let counter = 1

const observer = new MutationObserver(flushCallbacks) // new了一个MutationObserver类

const textNode = document.createTextNode(String(counter)) // 创建了一个文本节点

observer.observe(textNode, { // 原生api，帮我们监听一个节点

characterData: true // 当数据发生变化了就会异步执行flushCallbacks方法

})

timerFunc = () => {

counter = (counter + 1) % 2

textNode.data = String(counter) // 数据更新

}

isUsingMicroTask = true // 标记了一下使用的是微任务

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

// setImmediate原生方法，默认ie下有，高版本的谷歌也支持

timerFunc = () => {

setImmediate(flushCallbacks)

}

} else { // setTimeout

timerFunc = () => {

setTimeout(flushCallbacks, 0)

}

}

应用场景

=======================================================================

最后

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

深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！**

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！