await Vue.nextTick() 的含義分析

概述

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

await Vue.nextTick()

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

await Vue.nextTick();

這是爲何呢？使用場景又是什麼呢？

Vue.nextTick

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

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

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

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');

示例

下面是一個簡單的示例：

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 的常規用法嗎？)。