Vue中DOM更新时机疑问：为何官方仅提及next tick？

先看官方文档这段描述：

当你修改响应式状态时，DOM会自动更新。但需要注意的是，DOM更新并非同步执行。相反，Vue会将这些更新缓冲到更新周期中的"next tick"，以确保无论你进行多少次状态变更，每个组件仅更新一次。

为什么Vue要异步更新DOM？ #

核心原因就是性能优化。如果每次修改响应式状态都同步更新DOM，假设你在一个函数里连续修改3次状态，DOM就要重绘3次——这完全是浪费资源。Vue把所有状态变更先收集起来，攒到当前同步代码跑完后一次性更新，每个组件只渲染一次，能大幅减少浏览器的重绘重排开销。

到底什么是"Next Tick"？ #

简单理解：next tick就是当前同步代码执行完毕后，DOM更新完成的那个时间节点。Vue会把DOM更新操作放到当前事件循环的微任务队列里，等所有同步代码都执行完了，再去处理这些更新任务。

举个实际代码例子你就懂了：

<template>
  <div ref="countEl">{{ count }}</div>
</template>

<script>
export default {
  data() {
    return { count: 0 }
  },
  methods: {
    updateCount() {
      this.count = 5
      // 这里同步代码刚执行完，DOM还没更新，拿到的是旧值
      console.log(this.$refs.countEl.textContent) // 输出0

      // 用$nextTick等待DOM更新完成
      this.$nextTick(() => {
        console.log(this.$refs.countEl.textContent) // 输出5
      })
    }
  }
}
</script>

完整的更新流程拆解 #

1. 你修改响应式状态（比如this.count = 5），Vue会给对应的组件打上"需要更新"的标记。
2. 所有被标记的组件会被加入到一个更新队列里，不会立刻触发DOM更新。
3. 当前函数里的所有同步代码执行完毕后，Vue会清空更新队列，批量更新所有组件的DOM。
4. DOM更新完成后，$nextTick的回调函数才会执行，此时你就能拿到最新的DOM状态。

什么时候必须用nextTick？ #

• 修改状态后，立刻要操作更新后的DOM（比如获取新的DOM高度、调用依赖DOM的第三方插件）。
• 避免因为DOM未更新导致的逻辑错误（比如根据DOM内容判断下一步操作）。

内容的提问来源于stack exchange，提问作者Hedroins