作者：ChimezieEnyinnaya译者：前端小智来源：博客有梦想，有干货，微信搜索【大千世界】关注这位凌晨还在洗碗的洗碗智慧。本文已收录到GitHubhttps://github.com/qq449245884/xiaozhi，里面有完整的测试站点、资料和我的一线厂商访谈系列文章。一位前端开发者（小智）走进一家Vue吧。小智点了他最喜欢的鸡尾酒：Nuxt。调酒师正在努力。然后他开始唠叨自己。小智讲述了他是如何在Vue3的实例方法下找到$nextTick的，吓了一跳。小智用Vue有一段时间了，习惯把$watch和$emit写成实例方法。那么，$nextTick有什么用呢？Vue文档说它“[延迟]回调，在下一个DOM更新周期之后执行”。但是小智不相信。他接着讲述了他是如何尝试这样做的：this.loadingAnimation=truethis.startVeryLongCalculation()this.completeVeryLongCalculation()this.loadingAnimation=false有效。为什么？nextTick是做什么的？nextTick接受延迟到下一个DOM更新周期的回调函数。这只是Vue的表达方式，“嘿，如果你想在DOM更新后执行一个函数（这种情况很少发生），我希望你使用nextTick而不是setTimeout”。Vue.nextTick(()=>{})//语法下面将很快讨论setTimeout和nextTick参数。我们使用这个例子来可视化nextTick的行为：''}},mounted(){this.currentTime=3;this.$nextTick(()=>{让date=newDate()this.currentTime=date.getFullYear()});}}在J中在计算机上运行此代码片段。它将显示2021。并不是说如果您删除nextTick，您将不会得到相同的结果。但是，你应该明白，Vue会根据数据中的内容修改DOM。在上面的代码片段中，Vue将DOM更新为3，然后调用回调，将DOM更新为2021，最后将控制权交给浏览器，浏览器将显示2021。到目前为止，我们已经看到了nextTick在中插入回调函数回调队列并在适当的时间执行函数。您可能对此感兴趣，nextTick中的回调用作事件循环中的微任务。nextTick的源代码明确指出“nextTick行为利用微任务队列，可以通过本机Promise.then或MutationObserver访问它。”setTimeout与nextTick在DOM更新后执行函数的另一种方法是使用JavaScript的setTimeout()函数。我们将上面的代码替换为setTimeoutnextTick:
