今天咱们聊点技术的东西，说一个面试时常被问到的问题：“Vue中的$nextTick究竟是干嘛用的？”我知道，Vue这个框架咱们很多人都不陌生吧，尤其是$nextTick这个方法，用的时候也许顺手一写就过去了，但要是碰到面试官一问，想解释清楚就没那么简单了。
先来说说，Vue的$nextTick本质上干的是啥事。Vue的官方解释是“在下次DOM更新循环结束之后执行延迟回调。”简单来说，Vue在更新DOM时走的是异步队列，数据变化后不会立马把DOM更新了，而是把操作放到一个队列中，等到所有变更都处理完毕，再集中更新DOM。这样做是为了啥呢？还不是为了优化性能啊！
来看一个经典的场景——假设我们有个页面结构：
<div id="app">{{ message }}</div>
在Vue中，我们构建一个实例，给这个message赋个初始值，比如“原始值”。
const vm = new Vue({
el: '#app',
data: {
message: '原始值'
}
});
现在如果直接修改这个message，比如说连续赋值三次：
this.message = '值1';
this.message = '值2';
this.message = '值3';
这时候DOM内容会立刻变成“值3”吗？不会！即便咱们赋值了三次，但Vue实际上只会等所有变化都结束后才去更新DOM。你要是想立马获取到新的DOM内容，这就得用$nextTick。此时如果咱们直接在控制台里打印：
console.log(vm.$el.textContent); // 依然是'原始值'
DOM值还是老样子，原因很简单：Vue把这些操作都放进了一个队列里，并不会实时更新。Vue在背后搞了个优化机制，如果没有$nextTick，假设一个数字num连续自增到100000次，那界面得反应10万次！而有了$nextTick，Vue就只更新一次，这不就是节省了浏览器资源嘛。
再举个例子，要是想在数据变化后立即获得更新的DOM内容，用法如下：
vm.message = '修改后的值';
console.log(vm.$el.textContent); // => '原始的值'
Vue.nextTick(function () {
console.log(vm.$el.textContent); // => '修改后的值'
});
这里面传入的回调函数会在DOM更新完成后才执行，也就是说，$nextTick能保证页面上的数据是最新的。$nextTick不仅仅是Vue的实例方法，还可以在Vue实例外直接用。
当然，$nextTick也可以用Promise来写，支持async/await。这样更适合一些复杂的异步流程场景：
this.message = '修改后的值';
console.log(this.$el.textContent); // => '原始的值'
await this.$nextTick();
console.log(this.$el.textContent); // => '修改后的值'
最后，聊聊面试时如何回答这个问题。如果面试官问Vue中的$nextTick有什么作用，可以这样说：
$nextTick是Vue的一个异步更新机制，用来在下一次DOM更新完成后执行延迟回调。当我们修改数据后直接获取DOM时，往往得到的是旧值，因为Vue会把数据修改放在异步队列里，等所有修改完成后再更新DOM。而$nextTick则确保回调在DOM更新后执行。它还可以返回Promise，适用于async/await场景，大大方便我们获取最新的DOM状态。
如果面试官再深入问实现原理，可以提一下Vue通过不同的异步策略来实现$nextTick，例如Promise、MutationObserver、setImmediate以及setTimeout等方法。
总结一句话回答：$nextTick是Vue为优化性能、确保DOM异步更新而提供的一个方法，用于在数据变化后，访问最新的DOM内容。
目前，对编程、职场感兴趣的同学，大家可以联系我微信：golang404，拉你进入“程序员交流群”。
虎哥私藏精品 热门推荐 虎哥作为一名老码农，整理了全网最全《前端资料合集》。
