Vue2.6中的nextTick方法是什么-創(chuàng)新互聯(lián)

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

創(chuàng)新互聯(lián)從2013年創(chuàng)立，是專業(yè)互聯(lián)網(wǎng)技術服務公司，擁有項目網(wǎng)站建設、做網(wǎng)站網(wǎng)站策劃，項目實施與項目整合能力。我們以讓每一個夢想脫穎而出為使命，1280元聶拉木做網(wǎng)站,已為上家服務,為聶拉木各地企業(yè)和個人服務,聯(lián)系電話:18980820575

淺析 Vue 2.6 中的 nextTick 方法。

事件循環(huán)

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

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

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

通常認為是 task 的任務源：

setTimeout / setInterval
setImmediate
MessageChannel
I/O
UI rendering

通常認為是 microtask 的任務源：

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

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

首先開始執(zhí)行 script 腳本，直到執(zhí)行上下文棧為空時，開始清空 microtask 隊列里的任務，隊列嘛，先入先出，出一個執(zhí)行一個，清空完畢，走事件循環(huán)。
事件循環(huán)：不斷地去取 task 隊列的中的一個任務推入棧中執(zhí)行，并在當次循環(huán)里依次清空 microtask 隊列里的任務，清空之后，可能會觸發(fā)頁面更新渲染（由瀏覽器決定）。
之后重復 事件循環(huán) 步驟。

nextTick

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

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

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

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

這里劃成 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 的標識符
export let isUsingMicroTask = false;

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

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

// 遍歷函數(shù)數(shù)組執(zhí)行每一項函數(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 版本采用的策略其實并不相同。

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

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

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

microtask 在某些情況下也是會有問題的，因為 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)生嚴重錯誤
if (typeof Promise !== 'undefined' && isNative(Promise)) {
  const p = Promise.resolve();
  timerFunc = () => {
    p.then(flushCallbacks);

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

  // 當原生 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 {
  // 最后的倔強，timerFunc 使用 setTimeout
  timerFunc = () => {
    setTimeout(flushCallbacks, 0);
  };
}

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

nextTick 函數(shù)

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

cb 回調(diào)函數(shù)：是要延遲執(zhí)行的函數(shù)；
ctx：指定 cb 回調(diào)函數(shù) 的 this 指向；

Vue 實例方法 $nextTick 做了進一步封裝，把 ctx 設置為當前 Vue 實例。

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();
  }

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

小結

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

小結一下，每次調(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

版本差異

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

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

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

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

另外有需要云服務器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。

分享題目：Vue2.6中的nextTick方法是什么-創(chuàng)新互聯(lián)
網(wǎng)址分享：http://www.jbt999.com/article42/cddjec.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站策劃、微信小程序、建站公司、ChatGPT、企業(yè)網(wǎng)站制作、面包屑導航

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

猜你還喜歡下面的內(nèi)容