Vue中nextTick有什么作用

這篇文章給大家分享的是有關(guān)Vue中nextTick有什么作用的內(nèi)容。小編覺得挺實用的，因此分享給大家做個參考。一起跟隨小編過來看看吧。

創(chuàng)新互聯(lián)是一家專業(yè)提供石龍企業(yè)網(wǎng)站建設(shè),專注與成都做網(wǎng)站、成都網(wǎng)站制作、成都外貿(mào)網(wǎng)站建設(shè)、html5、小程序制作等業(yè)務(wù)。10年已為石龍眾多企業(yè)、政府機構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)的建站公司優(yōu)惠進行中。

nextTick是Vue的一個核心功能，在Vue內(nèi)部實現(xiàn)中也經(jīng)常用到nextTick。但是，很多新手不理解nextTick的原理，甚至不清楚nextTick的作用。

那么，我們就先來看看nextTick是什么。

nextTick功能

看看官方文檔的描述：

在下次 DOM 更新循環(huán)結(jié)束之后執(zhí)行延遲回調(diào)。在修改數(shù)據(jù)之后立即使用這個方法，獲取更新后的 DOM。

再看看官方示例：

// 修改數(shù)據(jù)
vm.msg = 'Hello'
// DOM 還沒有更新
Vue.nextTick(function () {
  // DOM 更新了
})

// 作為一個 Promise 使用 (2.1.0 起新增，詳見接下來的提示)
Vue.nextTick()
  .then(function () {
    // DOM 更新了
  })

2.1.0 起新增：如果沒有提供回調(diào)且在支持 Promise 的環(huán)境中，則返回一個 Promise。請注意 Vue 不自帶 Promise 的 polyfill，所以如果你的目標瀏覽器不原生支持 Promise (IE：你們都看我干嘛)，你得自己提供 polyfill。

可以看到，nextTick主要功能就是改變數(shù)據(jù)后讓回調(diào)函數(shù)作用于dom更新后。很多人一看到這里就懵逼了，為什么需要在dom更新后再執(zhí)行回調(diào)函數(shù)，我修改了數(shù)據(jù)后，不是dom自動就更新了嗎？

這個和JS中的Event Loop有關(guān)，網(wǎng)上教程不計其數(shù)，在此就不再贅述了。建議明白Event Loop后再繼續(xù)向下閱讀本文。

舉個實際的例子：

我們有個帶有分頁器的表格，每次翻頁需要選中第一項。正常情況下，我們想的是點擊翻頁器，向后臺獲取數(shù)據(jù)，更新表格數(shù)據(jù)，操縱表格API選中第一項。

但是，你會發(fā)現(xiàn)，表格數(shù)據(jù)是更新了，但是并沒有選中第一項。因為，你選中第一項時，雖然數(shù)據(jù)更新了，但是DOM并沒有更新。此時，你可以使用nextTick，在DOM更新后再操縱表格第一項的選中。

那么，nextTick到底做了什么了才能實現(xiàn)在DOM更新后執(zhí)行回調(diào)函數(shù)？

源碼分析

nextTick的源碼位于src/core/util/next-tick.js，總計118行，十分的短小精悍，十分適合初次閱讀源碼的同學。

nextTick源碼主要分為兩塊：

1.能力檢測

2.根據(jù)能力檢測以不同方式執(zhí)行回調(diào)隊列

能力檢測

這一塊其實很簡單，眾所周知，Event Loop分為宏任務(wù)（macro task）以及微任務(wù)（ micro task），不管執(zhí)行宏任務(wù)還是微任務(wù)，完成后都會進入下一個tick，并在兩個tick之間執(zhí)行UI渲染。

但是，宏任務(wù)耗費的時間是大于微任務(wù)的，所以在瀏覽器支持的情況下，優(yōu)先使用微任務(wù)。如果瀏覽器不支持微任務(wù)，使用宏任務(wù)；但是，各種宏任務(wù)之間也有效率的不同，需要根據(jù)瀏覽器的支持情況，使用不同的宏任務(wù)。

nextTick在能力檢測這一塊，就是遵循的這種思想。

// Determine (macro) task defer implementation.
// Technically setImmediate should be the ideal choice, but it's only available
// in IE. The only polyfill that consistently queues the callback after all DOM
// events triggered in the same loop is by using MessageChannel.
/* istanbul ignore if */
// 如果瀏覽器不支持Promise，使用宏任務(wù)來執(zhí)行nextTick回調(diào)函數(shù)隊列
// 能力檢測，測試瀏覽器是否支持原生的setImmediate（setImmediate只在IE中有效）
if (typeof setImmediate !== 'undefined' && isNative(setImmediate)) {
  // 如果支持，宏任務(wù)（ macro task）使用setImmediate
  macroTimerFunc = () => {
    setImmediate(flushCallbacks)
  }
  // 同上
} else if (typeof MessageChannel !== 'undefined' && (
  isNative(MessageChannel) ||
  // PhantomJS
  MessageChannel.toString() === '[object MessageChannelConstructor]'
)) {
  const channel = new MessageChannel()
  const port = channel.port2
  channel.port1.onmessage = flushCallbacks
  macroTimerFunc = () => {
    port.postMessage(1)
  }
} else {
  /* istanbul ignore next */
  // 都不支持的情況下，使用setTimeout
  macroTimerFunc = () => {
    setTimeout(flushCallbacks, 0)
  }
}

首先，檢測瀏覽器是否支持setImmediate，不支持就使用MessageChannel，再不支持只能使用效率最差但是兼容性最好的setTimeout了。

之后，檢測瀏覽器是否支持Promise，如果支持，則使用Promise來執(zhí)行回調(diào)函數(shù)隊列，畢竟微任務(wù)速度大于宏任務(wù)。如果不支持的話，就只能使用宏任務(wù)來執(zhí)行回調(diào)函數(shù)隊列。

執(zhí)行回調(diào)函數(shù)隊列

執(zhí)行回調(diào)函數(shù)隊列的代碼剛好在一頭一尾

// 回調(diào)函數(shù)隊列
const callbacks = []
// 異步鎖
let pending = false

// 執(zhí)行回調(diào)函數(shù)
function flushCallbacks () {
  // 重置異步鎖
  pending = false
  // 防止出現(xiàn)nextTick中包含nextTick時出現(xiàn)問題，在執(zhí)行回調(diào)函數(shù)隊列前，提前復制備份，清空回調(diào)函數(shù)隊列
  const copies = callbacks.slice(0)
  callbacks.length = 0
  // 執(zhí)行回調(diào)函數(shù)隊列
  for (let i = 0; i < copies.length; i++) {
    copies[i]()
  }
}

...

// 我們調(diào)用的nextTick函數(shù)
export function nextTick (cb?: Function, ctx?: Object) {
  let _resolve
  // 將回調(diào)函數(shù)推入回調(diào)隊列
  callbacks.push(() => {
    if (cb) {
      try {
        cb.call(ctx)
      } catch (e) {
        handleError(e, ctx, 'nextTick')
      }
    } else if (_resolve) {
      _resolve(ctx)
    }
  })
  // 如果異步鎖未鎖上，鎖上異步鎖，調(diào)用異步函數(shù)，準備等同步函數(shù)執(zhí)行完后，就開始執(zhí)行回調(diào)函數(shù)隊列
  if (!pending) {
    pending = true
    if (useMacroTask) {
      macroTimerFunc()
    } else {
      microTimerFunc()
    }
  }
  // $flow-disable-line
  // 2.1.0新增，如果沒有提供回調(diào)，并且支持Promise，返回一個Promise
  if (!cb && typeof Promise !== 'undefined') {
    return new Promise(resolve => {
      _resolve = resolve
    })
  }
}

總體流程就是，接收回調(diào)函數(shù)，將回調(diào)函數(shù)推入回調(diào)函數(shù)隊列中。

同時，在接收第一個回調(diào)函數(shù)時，執(zhí)行能力檢測中對應(yīng)的異步方法（異步方法中調(diào)用了回調(diào)函數(shù)隊列）。

如何保證只在接收第一個回調(diào)函數(shù)時執(zhí)行異步方法？

nextTick源碼中使用了一個異步鎖的概念，即接收第一個回調(diào)函數(shù)時，先關(guān)上鎖，執(zhí)行異步方法。此時，瀏覽器處于等待執(zhí)行完同步代碼就執(zhí)行異步代碼的情況。

打個比喻：相當于一群旅客準備上車，當?shù)谝粋€旅客上車的時候，車開始發(fā)動，準備出發(fā)，等到所有旅客都上車后，就可以正式開車了。

當然執(zhí)行flushCallbacks函數(shù)時有個難以理解的點，即：為什么需要備份回調(diào)函數(shù)隊列？執(zhí)行的也是備份的回調(diào)函數(shù)隊列？

因為，會出現(xiàn)這么一種情況：nextTick套用nextTick。如果flushCallbacks不做特殊處理，直接循環(huán)執(zhí)行回調(diào)函數(shù)，會導致里面nextTick中的回調(diào)函數(shù)會進入回調(diào)隊列。這就相當于，下一個班車的旅客上了上一個班車。

實現(xiàn)一個簡易的nextTick

說了這么多，我們來實現(xiàn)一個簡單的nextTick：

let callbacks = []
let pending = false

function nextTick (cb) {
    callbacks.push(cb)

    if (!pending) {
        pending = true
        setTimeout(flushCallback, 0)
    }
}

function flushCallback () {
    pending = false
    let copies = callbacks.slice()
    callbacks.length = 0
    copies.forEach(copy => {
        copy()
    })
}

可以看到，在簡易版的nextTick中，通過nextTick接收回調(diào)函數(shù)，通過setTimeout來異步執(zhí)行回調(diào)函數(shù)。通過這種方式，可以實現(xiàn)在下一個tick中執(zhí)行回調(diào)函數(shù)，即在UI重新渲染后執(zhí)行回調(diào)函數(shù)。

感謝各位的閱讀！關(guān)于Vue中nextTick有什么作用就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！

新聞名稱：Vue中nextTick有什么作用
本文網(wǎng)址：http://muchs.cn/article14/ijdige.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供域名注冊、響應(yīng)式網(wǎng)站、網(wǎng)站排名、品牌網(wǎng)站建設(shè)、微信小程序、外貿(mào)網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

外貿(mào)網(wǎng)站建設(shè)