nextTick

vue在更新DOM时是异步执行的：vue中更改响应式对象时，不会马上更新DOM，而是将他们缓存到一个队列中，直到下一个“tick”才一起执行。这样是为了保证不论组件发生多少次状态改变，都仅执行一次更新。

nextTick(callback) 可以在状态改变后立即使用，这样回调函数将在DOM更新完成后被调用

vue2和vue3中的nextTick对比

• vue2，早期开发由于浏览器对Promise的支持还不是很友好，nextTIck为了兼容旧浏览器，采用多级降级策略，先尝试微任务，到最后的宏任务，保证能运行
• vue3，现代浏览器都支持Promise微任务，所以vue3的nextTick只有微任务，微任务执行更早，性能更优先

实际应用：

从vue2到vue3的迁移，图表刷新带来的直观变化

• vue2，低端安卓机，nextTick降级到setTimeout，图表刷新延迟一帧，用户能感觉到卡顿
• vue3，始终微任务，能保证在当前帧内完成更新，流畅不卡顿

// vue2
this.data = newData
this.$nextTick(() => {
  this.chart.update()  // 有时会卡顿
})

// vue3
data.value = newData
nextTick(() => {
  chart.value.update()  // 总是流畅更新
})