Vue中的 $nextTick 怎么理解?

在上一篇vue中 beforeRouteLeave 生命周期函数中我们使用了$nextTick，那么什么是 $nextTick？

一、NextTick 是什么？

官方对其定义是：

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

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

举例说明一下：
HTML 结构

<div id="app"> {{ message }} </div>

构建一个 vue 实例

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

修改了 message 值之后

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

这时候想获取页面最新的 DOM 节点，会发现拿到的是旧的值。

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

这是因为 message 数据再变化的时候， vue 并不是立即更新 DOM ，而是将修改数据的操作放在一个异步操作队列中。

如果我们一直修改一个相同的属性为相同的值，异步操作还会进行去重操作。

等待同一事件循环中的所有数据变化完成之后，会将队列中的时间拿来进行处理，进行 DOM 的更新。

二、使用场景

如果想要在修改数据后立刻得到更新后的DOM结构，可以使用Vue.nextTick()；

第一个参数为：回调函数（可以获取最近的DOM结构）
第二个参数为：执行函数上下文

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

组件内使用 vm.$nextTick() 实例方法只需要通过this.$nextTick()，并且回调函数中的 this 将自动绑定到当前的 Vue 实例上

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

$nextTick() 会返回一个 Promise 对象，可以是用async/await完成相同作用的事情。

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

三、总结

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

如果想要在修改数据后立刻得到更新后的DOM结构，可以使用Vue.nextTick()；