会不会有这样的疑惑何时要用 async/await如果我给某个方法外部加上 async 之后假设我要在内部调用的3个方法都不加await都加await有的加await有的不加await是什么区别另外有时需要在调用 nextTick() 之后再在内部需要调用的方法还有要给 nextTick() 前面加await是为什么本篇我们将通过举例彻底解释这些问题...我们在编写 js 的过程中经常会遇到同步操作或异步操作的问题此时我们定义一个方法function outer() { fn1() fn2() fn3() }在 outer 方法中内部调用的三个方法fn1、fn2、fn3同时触发无法控制顺序谁快谁先执行出结果这种调用方式适用于三个方法互相无关其中任意一个无需其他两个的执行结果才能执行当你需要「等待一个异步操作完成再执行后面代码」的时候用 await情况1内部方法都需加 awaitasync function outer() { await fn1() await fn2() await fn3() }在 outer 方法中严格排队执行fn1 完成 → fn2 → fn3后面调用的方法依赖前面调用的方法的结果如果这种情况下不加 await代码不会等直接往下跑多个方法同步执行导致拿不到理想结果情况2内部方法有的加、有的不加 awaitasync function outer() { await fn1() fn2() await fn3() }在 outer 方法中等待 fn1 完成不等待 fn2直接触发 fn3fn2 和 fn3 并行跑这里要解释的一点为什么不是fn1和fn2一起执行fn2是同步操作为什么还需要等fn1执行完才执行因为 await 会阻塞当前函数的后续代码await fn1() 一出现整行后面的代码全部进入等待状态直到 fn1 完成不管fn2是不是同步操作。理解了 await 相关的执行顺序之后我们来融合 nextTick() 继续看先定义一个 DOM 结构如下template div v-ifshowDialog classdialog input refinput placeholder我会自动聚焦 / /div button clickopenDialog打开弹窗并自动聚焦/button /templatescript setup import { ref, nextTick } from vue // 控制弹窗显示 const showDialog ref(false) // DOM 引用 const input ref(null) /script先不带 async 玩来看一段代码示例传统回调式 nextTick 的写法是const openDialog () { // 修改响应式数据 showDialog.value true // 此时DOM还没更新直接拿不到最新DOM nextTick(() { // DOM 更新完成后再执行 console.log(nextTick 回调DOM已经渲染完成) input.value.focus() }) }我们知道 nextTick 的作用就是Vue 数据修改后DOM 不会立刻更新必须等 nextTick如果我们为了代码线性提高可读性就可以不用嵌套回调改用 async await nextTick 的写法const openDialog async () { showDialog.value true // 等待 Vue DOM 更新完成 await nextTick() // 这里可以安全操作 DOM、获取元素、聚焦、获取宽高等 console.log(await nextTick 后可以安全操作最新DOM) input.value.focus() }很显然如果我们没有写 await nextTick()就直接对 DOM 元素进行操作是无效的。小结其实 async/await 和 nextTick 并没有想象中复杂。await 的本质就是停下等待异步完成不加就放任异步并行执行而 nextTick 就是专门用来等 Vue DOM 渲染完成的工具只有配合 await 或回调才能生效。只要分清异步依赖要排队就用 await修改数据后要操作 DOM 就用 await nextTick避开无效调用、阻塞顺序混乱等坑就能轻松搞定日常 Vue 开发里 99% 的异步与 DOM 渲染场景。