组件的异步更新

TIP

需要对事件循环机制有一定了解

在 Vue 中，组件的更新是异步的。这意味着当你修改一个组件的状态（例如数据或属性）时，Vue 并不会立即重新渲染组件，而是将这个更新操作放入一个队列中，等待下一个事件循环周期来处理。

为什么

这种异步更新的机制可以提高性能，避免不必要的重复渲染。当多个状态变化发生时，Vue 可以合并这些变化，只进行一次渲染，从而减少 DOM 操作的开销。

怎么做到

异步更新基于浏览器的事件循环机制。在每次更新时，Vue 会将更新操作推入一个微任务队列中，并在下一个事件循环周期开始时处理这个队列中的所有更新。

nextTick

nextTick 接受一个回调函数 该函数会在本次事件循环的微任务队列末尾(组件更新完成)中执行 可以在组件更新后执行一些操作，比如访问更新后的 DOM 或进行其他依赖于最新状态的计算。

核心实现其实相当简单

const p = Promise.resolve()

// p是当前的微任务队列 nextTick 中传入fn会在组件更新时执行
// 另一种常用方法 await nextTick 会等待组件更新
export function nextTick(fn?) {
  return fn ? p.then(fn) : p
}