在Vue.js源碼中,有一個非常重要而且常用的方法—— nextTick。
nextTick函數在異步更新DOM時經常被使用,它將在DOM更新后執行隊列中的回調函數。該函數返回一個Promise對象,可以使用其.then方法來鏈式調用更新之后的回調函數。
Vue.prototype.$nextTick = function(fn: Function) {
return nextTick(fn, this)
}
可以看到,Vue的nextTick方法只是一個調用了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 = true
if (useMacroTask) {
macroTimerFunc()
} else {
microTimerFunc()
}
}
// $flow-disable-line
if (!cb && typeof Promise !== 'undefined') {
return new Promise(resolve =>{
_resolve = resolve
})
}
}
nextTick實現了一個異步隊列并將回調推入隊列之中。一旦隊列里的所有同步任務都執行完畢,nextTick會將其推入到下一個事件循環周期的微任務隊列中,以保證它會在DOM更新后被調用。
nextTick的實現也允許傳入一個回調函數,在異步隊列執行結束后自動被調用。如果沒有傳入回調,它將返回一個Promise對象,讓我們可以像寫Promise那樣鏈式調用回調函數。
總的來說,nextTick是Vue.js異步更新DOM的重要工具之一,它通過監聽隊列和使用微任務來保證回調函數在DOM更新之后被及時地調用。
上一篇mysql什么實務
下一篇html 設置上邊距