Vue.js 中的 nextTick 是什么？有什么作用？

nextTick 是 Vue.js 中的一个方法,它允许我们在下次 DOM 更新循环结束之后执行延迟回调。
nextTick 的作用是:

1. 等待 DOM 更新完成。
2. 然后执行回调函数。
3. 避免我们在数据变化之后立即使用 DOM,而 DOM 结构可能还没有更新完成。

使用方法:

js
this.$nextTick(function() {
  // DOM 更新了
})

或

js
Vue.nextTick(function() {
  // DOM 更新了  
})

示例:

html
<div ref="box">{{ message }}</div>

<button @click="message = 'Hello'">Update</button>  

js
methods: {
  onUpdate() {
    this.$nextTick(() => {
      this.$refs.box.innerText = this.message  
    })  
  }  
}  

当我们点击按钮更新 message 时,如果直接修改 DOM,那么 DOM 结构可能还未更新,innerText 会获取旧值。
使用 nextTick 可以确保在修改 DOM 之前等待 Vue 完成更新,此时 DOM 结构已更新,innerText 可以获取新值。

所以,nextTick 用于:

1. 等待 DOM 更新而不需要定时器。
2. 避免操作更新后的 DOM 时,DOM 结构可能还未更新完成。
3. 让数据与 DOM 保持同步。