Vue中的$nextTick()

官方定义：

在下次DOM更新循环结束后执行延迟回调，在修改数据之后立即使用这个方法，获取更新后的DOM

面试总结

​ Vue中DOM的更新采取的时候更新队列，Vue在观察到数据变化时候不是直接更新DOM，而是开启一个队列并缓冲在同一个事件循环中发生的所有数据改变。

​ 虽然Vue推荐我们采用数据驱动但是有些时候我们仍然需要使用一些原生DOM操作，当数据改变后，DOM并没有更新，这个时候是获取不到最新的DOM对象的，nextTick就是让我们知道DOM是什么时候更新完成的，所以我们可以把DOM操作的代码放到nextTick方法中执行也就是把代码推迟执行，DOM更新完成后在执行，
比如我们用swiper做轮播图，图片是接口获取的，发现并不轮播一般原因就是实例化swiper的时候，DOM还没渲染完成，这个时候我们就可以把swiper的实例化放到nextTick中执行。

简单理解

Vue在更新DOM时是异步执行，当数据放生变化，Vue将会开启一个一步的队列，视图需要等队列中所有的数据变化完成之后，在统一的进行更新

  <div id='app'  >{
     {
     msg}}</div>

var vm = new Vue ({
     
  el:'app',
  data:{
     
    msg: 1
  }
})

在created方法中修改msg

created(){
     
  this.msg = 2 ;
}

在mounted中获取DOM节点

mounted(){
     
  console.log( vm.$el.textContent ) //1===>原始值
}

这就是因为msg数据发生变化，vue不会立即更新DOM，而是将修改数据的操作放在了一个操作的队列中

这时候我们要想在数据改变视图之前对DOM进行一个操作的话，就需要通过nextTick

如果没有nextTick这个即时更新的机制，那么当我们的数据每次发生变化的话，都会触发视图的更新机制，有了nextTick这个更新机制，只需要更新一次，所以nextTick本质也是一种优化策略

使用场景

想要在数据修改后即时的得到更新后的DOM，可以使用Vue.nextTick()

// 修改数据
vm.msg = '修改后的值'
// DOM 还没有更新
console.log(vm.$el.textContent) // 原始值
Vue.nextTick(function () {
     
  // DOM 更新了
  console.log(vm.$el.textContent) // 修改后的值
})

组件内使用this.nextTick()，回调函数中的this将自动的绑定到当前的Vue实例上

this.msg = '修改后的值'
console.log(this.$el.textContent) // => '原始的值'
this.$nextTick(function () {
     
    console.log(this.$el.textContent) // => '修改后的值'
})

$nextTick返回的是一个Promise对象，所以亦可以用aync/await完成

this.msg = '修改后的值'
console.log(this.$el.textContent) // => '原始的值'
await this.$nextTick()
console.log(this.$el.textContent) // => '修改后的值'