小編給大家分享一下Vue2.6中的nextTick方法是什么，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

成都創(chuàng)新互聯(lián)專業(yè)為企業(yè)提供湯陰網(wǎng)站建設(shè)、湯陰做網(wǎng)站、湯陰網(wǎng)站設(shè)計、湯陰網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計與制作、湯陰企業(yè)網(wǎng)站模板建站服務(wù)，10多年湯陰做網(wǎng)站經(jīng)驗(yàn)，不只是建網(wǎng)站，更提供有價值的思路和整體網(wǎng)絡(luò)服務(wù)。

淺析 Vue 2.6中的 nextTick方法。

事件循環(huán)

JS 的 事件循環(huán)和 任務(wù)隊(duì)列其實(shí)是理解 nextTick 概念的關(guān)鍵。
這個網(wǎng)上其實(shí)有很多優(yōu)質(zhì)的文章做了詳細(xì)介紹，我就簡單過過了。

以下內(nèi)容適用于瀏覽器端 JS，NodeJS 的事件循環(huán)機(jī)制并不相同。

規(guī)范中規(guī)定 task 分為兩大類： task(macrotask) 和 microtask。

通常認(rèn)為是 task 的任務(wù)源：

setTimeout / setInterval
setImmediate
MessageChannel
I/O
UI rendering

通常認(rèn)為是 microtask 的任務(wù)源：

Promise
process.nextTick
MutationObserver
Object.observe（已廢棄）

簡單概況：（這里是官方規(guī)范）

1. 首先開始執(zhí)行 script 腳本，直到執(zhí)行上下文棧為空時，開始清空 microtask 隊(duì)列里的任務(wù)，隊(duì)列嘛，先入先出，出一個執(zhí)行一個，清空完畢，走事件循環(huán)。

2. 事件循環(huán)：不斷地去取 task 隊(duì)列的中的一個任務(wù)推入棧中執(zhí)行，并在當(dāng)次循環(huán)里依次清空 microtask 隊(duì)列里的任務(wù)，清空之后，可能會觸發(fā)頁面更新渲染（由瀏覽器決定）。

3. 之后重復(fù) 事件循環(huán)步驟。

nextTick

Vue 中數(shù)據(jù)的變化到 DOM 的更新渲染是一個異步過程。
此方法便用于在 DOM 更新循環(huán)結(jié)束之后執(zhí)行延遲回調(diào)。
使用方法很簡單：

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

// 作為一個 Promise 使用
Vue.nextTick().then(function() {
  // DOM 更新了
});

源碼 去除注釋，其實(shí)也只有不到一百來行，整體還是很容易理解的。

這里劃成 3 個部分介紹。

模塊變量

介紹 引入的模塊 和 定義的變量。

// noop 空函數(shù)，可用作函數(shù)占位符
import { noop } from 'shared/util';

// Vue 內(nèi)部的錯誤處理函數(shù)
import { handleError } from './error';

// 判斷是IE/IOS/內(nèi)置函數(shù)
import { isIE, isIOS, isNative } from './env';

// 使用 MicroTask 的標(biāo)識符
export let isUsingMicroTask = false;

// 以數(shù)組形式存儲執(zhí)行的函數(shù)
const callbacks = [];

// nextTick 執(zhí)行狀態(tài)
let pending = false;

// 遍歷函數(shù)數(shù)組執(zhí)行每一項(xiàng)函數(shù)
function flushCallbacks() {
  pending = false;
  const copies = callbacks.slice(0);
  callbacks.length = 0;
  for (let i = 0; i < copies.length; i++) {
    copies[i]();
  }
}

異步延遲函數(shù)

接下來是核心的 異步延遲函數(shù)。這里不同的 Vue 版本采用的策略其實(shí)并不相同。

2.6版本優(yōu)先使用 microtask作為異步延遲包裝器。

2.5版本則是 macrotask 結(jié)合 microtask。然而，在重繪之前狀態(tài)改變時會有小問題（如 ＃6813）。此外，在事件處理程序中使用 macrotask會導(dǎo)致一些無法規(guī)避的奇怪行為（如＃7109，＃7153，＃7546，＃7834，＃8109）。

所以 2.6版本現(xiàn)在又改用 microtask了，為什么是又呢。。因?yàn)?2.4版本及之前也是用的 microtask。。。

microtask在某些情況下也是會有問題的，因?yàn)?microtask優(yōu)先級比較高，事件會在順序事件（如＃4521，＃6690 有變通方法）之間甚至在同一事件的冒泡過程中觸發(fā)（＃6566）。

// 核心的異步延遲函數(shù)，用于異步延遲調(diào)用 flushCallbacks 函數(shù)
let timerFunc;

// timerFunc 優(yōu)先使用原生 Promise
// 原本 MutationObserver 支持更廣，但在 iOS >= 9.3.3 的 UIWebView 中，觸摸事件處理程序中觸發(fā)會產(chǎn)生嚴(yán)重錯誤
if (typeof Promise !== 'undefined' && isNative(Promise)) {
  const p = Promise.resolve();
  timerFunc = () => {
    p.then(flushCallbacks);

    // IOS 的 UIWebView，Promise.then 回調(diào)被推入 microtask 隊(duì)列但是隊(duì)列可能不會如期執(zhí)行。
    // 因此，添加一個空計時器“強(qiáng)制”執(zhí)行 microtask 隊(duì)列。
    if (isIOS) setTimeout(noop);
  };
  isUsingMicroTask = true;

  // 當(dāng)原生 Promise 不可用時，timerFunc 使用原生 MutationObserver
  // 如 PhantomJS，iOS7，Android 4.4
  // issue #6466 MutationObserver 在 IE11 并不可靠，所以這里排除了 IE
} else if (
  !isIE &&
  typeof MutationObserver !== 'undefined' &&
  (isNative(MutationObserver) ||
    // PhantomJS 和 iOS 7.x
    MutationObserver.toString() === '[object MutationObserverConstructor]')
) {
  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;

  // 如果原生 setImmediate 可用，timerFunc 使用原生 setImmediate
} else if (typeof setImmediate !== 'undefined' && isNative(setImmediate)) {
  timerFunc = () => {
    setImmediate(flushCallbacks);
  };
} else {
  // 最后的倔強(qiáng)，timerFunc 使用 setTimeout
  timerFunc = () => {
    setTimeout(flushCallbacks, 0);
  };
}

一句話總結(jié)優(yōu)先級：microtask 優(yōu)先。
Promise> MutationObserver> setImmediate> setTimeout

nextTick 函數(shù)

nextTick 函數(shù)。接受兩個參數(shù)：

1. cb 回調(diào)函數(shù)：是要延遲執(zhí)行的函數(shù)；

2. ctx：指定 cb 回調(diào)函數(shù) 的 this 指向；

Vue 實(shí)例方法 $nextTick做了進(jìn)一步封裝，把 ctx設(shè)置為當(dāng)前 Vue 實(shí)例。

export function nextTick(cb?: Function, ctx?: Object) {
  let _resolve;

  // cb 回調(diào)函數(shù)會經(jīng)統(tǒng)一處理壓入 callbacks 數(shù)組
  callbacks.push(() => {
    if (cb) {
      // 給 cb 回調(diào)函數(shù)執(zhí)行加上了 try-catch 錯誤處理
      try {
        cb.call(ctx);
      } catch (e) {
        handleError(e, ctx, 'nextTick');
      }
    } else if (_resolve) {
      _resolve(ctx);
    }
  });

  // 執(zhí)行異步延遲函數(shù) timerFunc
  if (!pending) {
    pending = true;
    timerFunc();
  }

  // 當(dāng) nextTick 沒有傳入函數(shù)參數(shù)的時候，返回一個 Promise 化的調(diào)用
  if (!cb && typeof Promise !== 'undefined') {
    return new Promise(resolve => {
      _resolve = resolve;
    });
  }
}

小結(jié)

整體看過來，感覺還是比較好理解的吧~ 2.6版本相比之前簡化了一點(diǎn)。

小結(jié)一下，每次調(diào)用 Vue.nextTick(cb) 會做些什么：
cb 函數(shù)經(jīng)處理壓入 callbacks 數(shù)組，執(zhí)行 timerFunc 函數(shù)，延遲調(diào)用 flushCallbacks 函數(shù)，遍歷執(zhí)行 callbacks 數(shù)組中的所有函數(shù)。

延遲調(diào)用優(yōu)先級如下：
Promise> MutationObserver> setImmediate> setTimeout

版本差異

其實(shí) Vue 2.4、2.5、2.6版本的 nextTick策略都略不一樣。

整體 2.6和 2.4的比較相似。（仔細(xì)瞅了瞅，基本就是一樣的，2.6timerFunc 多了個 setImmediate 判斷）

2.5版本其實(shí)也差不多。。。源碼寫法有些不一樣，整體優(yōu)先級是：Promise> setImmediate> MessageChannel> setTimeout，如果更新是在 v-on 事件處理程序中觸發(fā)的，nextTick 會優(yōu)先使用 macrotask。

以上是“Vue2.6中的nextTick方法是什么”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！