await Vue.nextTick() 的含義分析

概述

今天看別人的單元測試代碼的時候碰到了一段代碼 await Vue.nextTick(),初看起來不是很懂,後來經過查資料弄懂了,記錄下來,供之後開發時參考,相信對其餘人也有用。async

await Vue.nextTick()

咱們都用過 Vue.nextTick,可是在用的時候會在裏面加一個回調函數的,可是有人直接這麼使用:函數

await Vue.nextTick();

這是爲何呢?使用場景又是什麼呢?單元測試

Vue.nextTick

要了解這段代碼的含義,咱們首先來看 Vue.nextTick() 若是不加回調函數會怎樣?測試

經過查閱官方文檔,能夠知道,Vue.nextTick() 裏面若是加了回調,則會在下次 DOM 更新循環結束以後執行延遲迴調。若是在修改數據以後當即使用這個方法,則能夠獲取更新後的 DOM。若是沒有提供回調且在支持 Promise 的環境中 則會返回一個 Promise!!!spa

因此 await Vue.nextTick() 至關於在 await 後面加了一個 Promise。code

await

await 後面加一個 Promise 又會怎樣呢?開發

經過查閱資料,咱們能夠知道,await 後面必須跟 Promise,不然會報錯;若是跟了 Promise,那麼當執行到這裏的時候,會先返回,等 Promise 返回後,再繼續執行下面的代碼。好比下面這段代碼:文檔

async function f1() {
  console.log('xxxx');
  await new Promise();
  console.log('tttt');
}

當執行到 await new Promise(); 時,會先返回,等 Promise resolve 以後再才執行下面的 console.log('tttt');回調函數

示例

下面是一個簡單的示例:it

function genPromise() {
  return new Promise(resolve => {
	console.log('await start');
    setTimeout(() => {
	    console.log('await end');
      resolve();
    }, 0);
  });
}

async function f1() {
  console.log('xxxx');
  await genPromise();
  console.log('should be after await end');
}

f1();

最後的打印結果是:

xxxx
await start
await end
should be after await end

因此 await Vue.nextTick() 就和這個相似,它會在等 DOM 更新以後再執行後面的代碼,其實就至關於把裏面的代碼拿出來寫在後面了(仔細一想,這不就是 await 的常規用法嗎?)

相關文章
相關標籤/搜索