this.$nextTick
是 Vue.js 内部使用的一个方法,用于在下一个 DOM 更新循环结束之后执行回调函数。
原理:
- nextTick 方法被调用后,会将回调函数存储在一个队列中
- 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 !== '