建站
咨詢
售后
建站咨詢
新聞中心
1.為什么需要使用$nextTick?
首先我們來看看官方對于$nextTick的定義:
網(wǎng)站建設哪家好，找創(chuàng)新互聯(lián)公司！專注于網(wǎng)頁設計、網(wǎng)站建設、微信開發(fā)、微信平臺小程序開發(fā)、集團企業(yè)網(wǎng)站建設等服務項目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了瓊山免費建站歡迎大家使用！
在下次 DOM 更新循環(huán)結(jié)束之后執(zhí)行延遲回調(diào)。在修改數(shù)據(jù)之后立即使用這個方法，獲取更新后的 DOM。
由于vue的試圖渲染是異步的，生命周期的created()鉤子函數(shù)進行的DOM操作一定要放在Vue.nextTick()的回調(diào)函數(shù)中，原因是在created()鉤子函數(shù)執(zhí)行的時候DOM其實并未進行渲染，而此時進行DOM操作是徒勞的，所以一定要將DOM操作的js代碼放到Vue.nextTick()的回調(diào)函數(shù)中。除了在created()鉤子函數(shù)中使用之外咱們還會遇到很多種需要使用到Vue.nextTick()的場景，如下所示：
咱們?nèi)粘Ｉ钪谐３錾仙鲜鰣鼍?，當我們點擊按鈕更新數(shù)據(jù)時候，如下示例：
點擊控制欄顯示效果：控制欄報錯，提示沒有獲取到dom元素；
所以現(xiàn)在Vue.nextTick()派上了用場，Vue.nextTick() 方法的作用正是等待上一次事件循環(huán)執(zhí)行完畢，并在下一次事件循環(huán)開始時再執(zhí)行回調(diào)函數(shù)。這樣可以保證回調(diào)函數(shù)中的 DOM 操作已經(jīng)被 Vue.js 進行過更新，從而避免了一些潛在的問題，如下代碼所示：
加上this.$nextTick后就能夠使得輸入框獲取到焦點；
總而言之Vue.nextTick()就是下次 DOM 更新渲染后執(zhí)行延遲回調(diào)函數(shù)。在日常開發(fā)中，我們在修改數(shù)據(jù)之后使用這個方法，就可以獲取更新后的 DOM的同時進行在對DOM進行相對應操作的 js代碼；
2.$nextTick如何實現(xiàn)的？
JS是單線程執(zhí)行的，所有的同步任務都是在主線程上執(zhí)行的，形成了一個執(zhí)行棧，從上到下依次執(zhí)行，異步代碼會放在任務隊列里面。
?同步任務
在主線程里執(zhí)行，當瀏覽器第一遍過濾html文件的時候可以執(zhí)行完；（在當前作用域直接執(zhí)行的所有內(nèi)容，包括執(zhí)行的方法、new出來的對象）
?異步任務
耗費時間較長或者性能較差的，瀏覽器執(zhí)行到這些的時候會將其丟到異步任務隊列中，不會立即執(zhí)行
同時異步任務分為宏任務（如setTimeout、setInterval、postMessage、setImmediate等）和微任務（Promise、process.nextTick等），瀏覽器執(zhí)行這兩種任務的優(yōu)先級不同；會優(yōu)先執(zhí)行微任務隊列的代碼，微任務隊列清空之后再執(zhí)行宏任務的隊列，這樣循環(huán)往復；
JS自上向下進行代碼的編譯執(zhí)行，遇到同步代碼壓入JS執(zhí)行棧執(zhí)行后出棧，遇到異步代碼放入任務隊列，當JS執(zhí)行棧清空，去執(zhí)行異步隊列中的回調(diào)函數(shù)，先去執(zhí)行微任務隊列，當微任務隊列清空后，去檢測執(zhí)行宏任務隊列中的回調(diào)函數(shù)，直至所有棧和隊列清空
整體流程如下圖所示：
接下來讓我們看看nextTick的源碼~
vue將nextTick的源碼放在了vue/core/util/next-tick.js中。如下圖所示：
我們把這個文件拆成三個部分來看：
1.nextTick定義函數(shù)
我們將nextTick函數(shù)單獨拿出來，callbacks是一個回調(diào)隊列，其實調(diào)用nextTick就是往這個數(shù)組里面?zhèn)鲌?zhí)行任務，callbacks新增回調(diào)函數(shù)之后執(zhí)行timerFunc函數(shù)，pending是用來限制同一個事件循環(huán)內(nèi)只能執(zhí)行一次的pending鎖；
const callbacks = [] // 回調(diào)隊列
let pending = false //
export function nextTick (cb?: Function, ctx?: Object) {
let _resolve
callbacks.push(() => {
// cb 回調(diào)函數(shù)會經(jīng)統(tǒng)一處理壓入 callbacks 數(shù)組
if (cb) {
try {
cb.call(ctx)
} catch (e) {
handleError(e, ctx, 'nextTick')
}
} else if (_resolve) {
_resolve(ctx)
}
})
// 執(zhí)行異步延遲函數(shù) timerFunc
if (!pending) {
pending = true
timerFunc()
}
// $flow-disable-line
// 當 nextTick 沒有傳入函數(shù)參數(shù)的時候，返回一個 Promise 化的調(diào)用
if (!cb && typeof Promise !== 'undefined') {
return new Promise(resolve => {
_resolve = resolve
})
}
}2.timerFunc函數(shù)
做了四個判斷，先后嘗試當前環(huán)境是否能夠使用原生的Promise.then、MutationObserver和setImmediate，不斷的降級處理，如果以上三個都不支持，則最后就會直接使用setTimeOut，主要操作就是將flushCallbacks中的函數(shù)放入微任務或者宏任務，等待下一個事件循環(huán)開始執(zhí)行；宏任務耗費的時間是大于微任務的，所以在瀏覽器支持的情況下，優(yōu)先使用微任務。如果瀏覽器不支持微任務，使用宏任務；但是，各種宏任務之間也有效率的不同，需要根據(jù)瀏覽器的支持情況，使用不同的宏任務；
export let isUsingMicroTask = false
let timerFunc
if (typeof Promise !== 'undefined' && isNative(Promise)) {
//是否支持Promise
const p = Promise.resolve()
timerFunc = () => {
p.then(flushCallbacks)
if (isIOS) setTimeout(noop)
}
isUsingMicroTask = true
} else if (!isIE && typeof MutationObserver !== 'undefined' && (
isNative(MutationObserver) ||
MutationObserver.toString() === '[object MutationObserverConstructor]'
)) {
//是否支持MutationObserver
let counter = 1
const observer = new MutationObserver(flushCallbacks)
const textNode = document.createTextNode(String(counter))
observer.observe(textNode, {
characterData: true
})
timerFunc = () => {
counter = (counter + 1) % 2
textNode.data = String(counter)
}
isUsingMicroTask = true
} else if (typeof setImmediate !== 'undefined' && isNative(setImmediate)) {
timerFunc = () => {
//是否支持setImmediate
setImmediate(flushCallbacks)
}
} else {
// Fallback to setTimeout.
timerFunc = () => {
//上面都不行，直接使用setTimeout
setTimeout(flushCallbacks, 0)
}
}3.flushCallbacks函數(shù)
flushCallbacks函數(shù)只有幾行，也很好理解，將pending鎖置為false，同時將callbacks數(shù)組復制一份之后再將callbacks置為空，接下來將復制出來的callbacks數(shù)組的每個函數(shù)依次進行執(zhí)行，簡單來說它的主要作用就是用來執(zhí)行callbacks中的回調(diào)函數(shù)；
function flushCallbacks () {
pending = false
const copies = callbacks.slice(0)
callbacks.length = 0
for (let i = 0; i < copies.length; i++) {
copies[i]()
}
}值得注意的是，$nextTick 并不是一個真正意義上的微任務microtask，而是利用了事件循環(huán)機制來實現(xiàn)異步更新。因此，它的執(zhí)行時機相對于微任務可能會有所延遲，但仍能保證在 DOM 更新后盡快執(zhí)行回調(diào)函數(shù)。
總的來說，nextTick就是
1.將傳入的回調(diào)函數(shù)放入callbacks數(shù)組等待執(zhí)行，定義pending判斷鎖保證一個事件循環(huán)中只能調(diào)用一次timerFunc函數(shù)；
2.根據(jù)環(huán)境判斷使用異步方式，調(diào)用timerFunc函數(shù)調(diào)用flushCallbacks函數(shù)依次執(zhí)行callbacks中的回調(diào)函數(shù)；
3.個人小結(jié)
nextTick可避免數(shù)據(jù)更新后導致DOM的數(shù)據(jù)不一致的問題，提供了更穩(wěn)定的異步更新機制，解決了created鉤子函數(shù)DOM未渲染會造成的異步數(shù)據(jù)渲染問題，但如果過多的使用nextTick會導致事件循環(huán)中任務數(shù)量和回調(diào)函數(shù)增多，有可能出現(xiàn)可怕的回調(diào)地獄，導致性能下降，同時過度依賴nextTick也會降低代碼的可讀性，所以大家還是"按需加載"的好~
當前文章：解析$nextTick魔力，為啥大家都愛它？
標題網(wǎng)址：http://www.5511xx.com/article/cdhidoe.html
