本文分享自华为云社区《Vue 中的 nextTick 有什么作用？》，作者：CoderBin。CNq拜客生活常识网

一、什么是nextTick

先看看官方对其的定义：CNq拜客生活常识网

在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。CNq拜客生活常识网

什么意思呢？CNq拜客生活常识网

我们可以理解成，Vue 在更新 DOM 时是异步执行的。当数据发生变化，Vue将开启一个异步更新队列，视图需要等队列中所有数据变化完成之后，再统一进行更新CNq拜客生活常识网

举个例子：CNq拜客生活常识网

Html结构CNq拜客生活常识网

 {{ message }} 

构建一个vue实例CNq拜客生活常识网

const vm = new Vue({
  el: '#app',
  data: {
    message: '原始值'
  }
})

修改messageCNq拜客生活常识网

this.message = '修改后的值1' 
this.message = '修改后的值2' 
this.message = '修改后的值3'

这时候想获取页面最新的DOM节点，却发现获取到的是旧值CNq拜客生活常识网

console.log(vm.$el.textContent) // 原始值

这是因为message数据在发现变化的时候，vue并不会立刻去更新Dom，而是将修改数据的操作放在了一个异步操作队列中CNq拜客生活常识网

如果我们一直修改相同数据，异步操作队列还会进行去重CNq拜客生活常识网

等待同一事件循环中的所有数据变化完成之后，会将队列中的事件拿来进行处理，进行DOM的更新CNq拜客生活常识网

为什么要有nexttickCNq拜客生活常识网

举个例子CNq拜客生活常识网

{{num}} 
for(let i=0; i<100000; i++){ 
  num = i 
}

如果没有 nextTick 更新机制，那么 num 每次更新值都会触发视图更新(上面这段代码也就是会更新10万次视图)，有了nextTick机制，只需要更新一次，所以nextTick本质是一种优化策略CNq拜客生活常识网

二、使用场景

如果想要在修改数据后立刻得到更新后的DOM结构，可以使用Vue.nextTick()CNq拜客生活常识网

• 第一个参数为：回调函数（可以获取最近的

相关阅读: