$nextTick源码解析

本文主要是介绍$nextTick源码解析，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

this.$nextTick 是 Vue.js 内部使用的一个方法，用于在下一个 DOM 更新循环结束之后执行回调函数。

原理：

1. nextTick 方法被调用后，会将回调函数存储在一个队列中
2. Vue.js 会利用浏览器的异步队列机制，在 DOM 更新循环结束后执行这个队列中的所有回调函数。

源码：

/*** Defer a task to execute it asynchronously.*/
export const nextTick = (function () {const callbacks = []let pending = falselet timerFuncfunction nextTickHandler () {pending = falseconst copies = callbacks.slice(0)callbacks.length = 0for (let i = 0; i < copies.length; i++) {copies[i]()}}// 判断浏览器是否支持Promise，如果支持，则使用Promise的方式实现nextTickif (typeof Promise !== 'undefined' && isNative(Promise)) {const p = Promise.resolve()timerFunc = () => {p.then(nextTickHandler)}} else if (!isIE && typeof MutationObserver !== '

这篇关于$nextTick源码解析的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---