this.$nextTick
是 Vue.js 内部使用的一个方法,用于在下一个 DOM 更新循环结束之后执行回调函数。
原理:
- nextTick 方法被调用后,会将回调函数存储在一个队列中
- Vue.js 会利用浏览器的异步队列机制,在 DOM 更新循环结束后执行这个队列中的所有回调函数。
源码:
/**
* Defer a task to execute it asynchronously.
*/
export const nextTick = (function () {
const callbacks = []
let pending = false
let timerFunc
function nextTickHandler () {
pending = false
const copies = callbacks.slice(0)
callbacks.length = 0
for (let i = 0; i < copies.length; i++) {
copies[i]()
}
}
// 判断浏览器是否支持Promise,如果支持,则使用Promise的方式实现nextTick
if (typeof Promise !== 'undefined' && isNative(Promise)) {
const p = Promise.resolve()
timerFunc = () => {
p.then(nextTickHandler)
}
} else if (!isIE && typeof MutationObserver !== '