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 的常规用法吗？)。