Vue3-nextTick：从源码到理解

前端

2023-11-27 23:36:39

nextTick的前世今生

在 Vue2 中，nextTick是作为 Vue 实例的一个方法存在的，而在 Vue3 中，nextTick 则是一个全局 API。

从本质上说，nextTick 的作用是将回调函数延迟到下一次 DOM 更新循环后执行，这样可以确保在 DOM 更新完成后再执行回调函数。

队列机制

nextTick 内部使用了队列机制来存储需要延迟执行的回调函数。当调用 nextTick 时，回调函数会添加到队列中，然后在下次 DOM 更新循环时执行。

微任务和宏任务

nextTick 使用的是微任务队列，而不是宏任务队列。这意味着 nextTick 中的回调函数会在宏任务（如 setTimeout 和 setInterval）之前执行。

执行时机

nextTick 中的回调函数会在下一次 DOM 更新循环结束时执行。这意味着在 DOM 更新过程中，nextTick 中的回调函数不会执行。

nextTick 的一些注意事项

nextTick 不是一个同步函数，这意味着它不会立即执行回调函数。
nextTick 中的回调函数可以在 Vue 实例的任何生命周期中调用。
nextTick 可以用于在 DOM 更新后执行一些操作，如更新视图、设置数据等。
在 DOM 更新后更新视图。
在 DOM 更新后设置数据。
在 DOM 更新后执行其他异步操作。

nextTick 与其他异步 API（如 setTimeout 和 setInterval）的区别在于，nextTick 会在 DOM 更新后执行回调函数，而 setTimeout 和 setInterval 会在指定的时间间隔后执行回调函数。

// 在 DOM 更新后更新视图
this.$nextTick(() => {
  this.count++
})

// 在 DOM 更新后设置数据
this.$nextTick(() => {
  this.message = 'Hello, world!'
})

// 在 DOM 更新后执行其他异步操作
this.$nextTick(() => {
  this.$http.get('/api/data').then((response) => {
    this.data = response.data
  })
})