概述
今天看別人的單元測試代碼的時候碰到了一段代碼 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 的常規用法嗎？)。