Vue 中 Promise 位置影响响应式更新触发次数的原理详解-js教程-PHP中文网

Vue 中 Promise 位置影响响应式更新触发次数的原理详解

在 Vue 3 响应式系统中，将 Promise.resolve().then() 放在 reactive 数据修改前后，会显著影响 onUpdated 等生命周期钩子的触发次数——前置 Promise 可合并多次同步修改为单次更新，后置则导致额外异步更新。

在 vue 3 响应式系统中，将 `promise.resolve().then()` 放在 reactive 数据修改前后，会显著影响 `onupdated` 等生命周期钩子的触发次数——前置 promise 可合并多次同步修改为单次更新，后置则导致额外异步更新。

Vue 3 的响应式更新机制基于“微任务队列（microtask queue）”实现批量更新优化。当对 reactive 对象进行同步修改（如 list.push()）时，Vue 并不会立即触发 DOM 更新，而是将本次更新任务收集到一个内部微任务（由 queueJob 调度），等待当前同步代码执行完毕后，在下一个 Promise.then 或 queueMicrotask 时机统一执行。

关键在于：Vue 自身的更新微任务与用户手动创建的微任务（如 Promise.resolve().then()）共享同一事件循环阶段，但执行顺序严格遵循入队先后。

✅ 正确写法：Promise 置前 → 合并更新（仅触发 1 次 `onUpdated`）

const list = reactive([1, 2, 3, 4, 5]);
const handleClick = () => {
  // ✅ 先注册 Promise 微任务（空转，仅占位）
  Promise.resolve().then(() => {
    list.push(33); // 此操作将被纳入后续 Vue 的同一批更新
  });

  // ✅ 所有同步修改（push）立即触发依赖收集，并排队进 Vue 的更新微任务
  list.push(...[11, 12, 13, 14, 15]);
  list.push(...[16, 17, 18, 19, 20]);
};

此时执行顺序为：