JS 事件循环（宏/微任务） ↔ Vue ↔ React** 三者的关系

一、核心结论（先记死）

Vue 和 React 的异步更新底层，完全一样！

都是基于 JS 原生的 微任务（Microtask） 实现的。

---

二、三者关系大白话

1. JS 事件循环 = 地基

• 同步 → 微任务 → 宏任务
• 这是浏览器规则，所有框架都必须遵守

2. Vue = 用微任务做 DOM 更新

• Vue 把 DOM 更新、nextTick 都放进 微任务
• 执行顺序：
  同步代码 → 微任务(Vue更新DOM + nextTick) → 宏任务

3. React = 也用微任务做批量更新

• React 18 之后的 自动批处理、Concurrent Mode
• 底层也是 微任务 驱动
• 执行顺序和 Vue 一模一样

---

三、最关键：Vue 和 React 在事件循环里的行为对比

完全一样的规则：

1. 同步代码先执行
2. 框架批量更新 DOM（微任务）
3. 微任务清空
4. 浏览器渲染（Layout / Paint）
5. 最后执行宏任务（setTimeout）

代码对比（效果完全相同）

Vue3

const count = ref(0)

const change = () => {
  count.value = 1
  console.log('同步：DOM还没变')  // 先走

  nextTick(() => {
    console.log('微任务：DOM更新了') // 再走
  })

  setTimeout(() => {
    console.log('宏任务：最后走') // 最后
  }, 0)
}

React 18+

const [count, setCount] = useState(0)

const change = () => {
  setCount(1)
  console.log('同步：DOM还没变') // 先走

  // React 没有 nextTick，但用 Promise 就等价
  Promise.resolve().then(() => {
    console.log('微任务：DOM更新了') // 再走
  })

  setTimeout(() => {
    console.log('宏任务：最后走') // 最后
  }, 0)
}

输出顺序完全一样！

同步：DOM还没变
微任务：DOM更新了
宏任务：最后走

---

四、为什么 React 没有像 Vue 一样讲事件循环？

因为：

• Vue 暴露了 nextTick
• React 隐藏了底层，自动批处理

但底层原理 100% 相同：

• 都是异步更新 DOM
• 都放在微任务
• 都遵守 同步 → 微任务 →浏览器渲染→ 宏任务

---

五、一张图彻底打通所有关系

JS 事件循环（地基）
  ↓
同步代码
  ↓
微任务（Vue DOM更新 / React批量更新）
  ↓
宏任务（setTimeout、ajax、UI渲染）

---

六、终极总结（面试必背）

1. Vue 和 React 异步更新原理完全一样，都基于 JS 微任务
2. 执行顺序永远是：同步 → 微任务(框架更新) → 宏任务
3. Vue nextTick = React Promise.resolve().then()
4. setTimeout 永远最后执行

---