vue的事件循环

我用最简单、最直白、不绕弯 的方式，把 Vue 的事件循环（异步更新原理） 讲得明明白白，这是你理解 nextTick、watch、flush 的底层核心。

一、一句话讲透：Vue 事件循环是什么？

Vue 的事件循环 = JS 原生事件循环 + Vue 自己的「异步更新队列」

核心只有一句话：
Vue 为了性能，不会数据一变就更新 DOM，而是把所有变更攒到一起，一次性批量更新 DOM ------ 这个"攒一攒再更新"的过程，就是 Vue 事件循环。

二、为什么要这么做？（性能）

假如你写：

js 复制代码

count.value = 1
count.value = 2
count.value = 3
count.value = 4

如果每次赋值都更新 DOM，页面会疯狂刷新，巨卡。

Vue 的做法：
先把所有变更存起来 → 等当前同步代码跑完 → 一次性更新 DOM

这就是异步批量更新。

三、Vue 事件循环执行顺序（超级重要）

你只需要记住这个固定顺序：

执行顺序：

同步代码 最先执行（你写的普通逻辑）
Vue 异步更新队列（更新 DOM）
nextTick 回调
最后才是浏览器的微任务/宏任务

简单记：
同步代码 → Vue 更新DOM → nextTick → 原生微任务

四、最经典的例子（一看就懂）

vue 复制代码

<template>
  <div id="box">{{ count }}</div>
</template>

<script setup>
import { ref, nextTick } from 'vue'
const count = ref(0)

const change = async () => {
  // 1. 同步代码执行
  count.value = 100
  console.log('同步：', box.innerText) // 输出 0（DOM 还没更）

  // 2. 等待 Vue 更新 DOM
  await nextTick()

  // 3. DOM 已更新
  console.log('nextTick：', box.innerText) // 输出 100
}
</script>

执行流程：

修改 count → Vue 把更新放进队列，不立刻更新 DOM
同步代码跑完
Vue 自动执行批量更新 DOM
执行 nextTick

五、nextTick 到底是干嘛的？

nextTick = 等 Vue 把 DOM 更新完之后，再执行你的代码

适用场景：

数据变了之后立刻获取最新 DOM
数据变了之后操作 DOM、获取宽高、调用第三方库

一句话：
想拿到更新后的 DOM，就必须用 nextTick

六、和 watch flush 有什么关系？

直接对应上了！

flush: 'pre'（默认）→ DOM 更新前执行
flush: 'post' → DOM 更新后执行（等价于 nextTick 里执行）
flush: 'sync' → 同步执行，不进队列，立刻执行

这就是为什么：
操作 DOM 必须用 post，因为要等 DOM 更完

七、超级精简总结（必背）

Vue 是异步更新 DOM
同步代码先跑 → Vue 批量更新 DOM → nextTick 执行
想获取最新 DOM → 必须用 nextTick
watch 的 flush 就是控制回调在这个循环里的执行时机

最终大白话总结

Vue 事件循环就是：数据变了不立刻更DOM，先攒着，等同步代码跑完，一次性更DOM，nextTick 就是等它更完再跑。

需要我给你出 2 道 Vue 事件循环经典面试题 让你练手吗？一做就彻底吃透。