【vue篇】Vue 响应式更新揭秘：数据变了，DOM 为何不立即刷新？

在 Vue 开发中，你是否写过这样的代码：

this.message = 'New Value';
console.log(this.$el.textContent); //  为什么还是旧值？

这背后是 Vue 异步更新队列的精妙设计。

本文将从 事件循环 到 源码级实现，彻底解析 Vue 为何不立即渲染。

一、核心结论

// 数据变化
this.message = 'Hello';

//  此时 DOM 尚未更新
console.log(this.$el.textContent); // 可能仍是旧值

//  在下一个 "tick" 后，DOM 才更新
this.$nextTick(() => {
  console.log(this.$el.textContent); //  'Hello'
});

二、为什么异步更新？

1. 性能优化：避免重复渲染

// 同步更新： 3 次 render
this.a = 1; // render()
this.b = 2; // render()
this.c = 3; // render()

// 异步更新： 1 次 render
this.a = 1;
this.b = 2;
this.c = 3; // 批量更新

2. 避免无效计算

this.items.push(1);
this.items.push(2);
this.items.pop(); // 最终 items 未变

• 同步更新：执行 3 次 patch；
• 异步更新：去重后发现无需更新，跳过渲染。

3. 符合浏览器渲染机制

浏览器在 一次事件循环结束 后才进行重排（reflow）和重绘（repaint）。

Vue 的异步更新与浏览器节奏同步，避免强制同步布局（Forced Synchronous Layout）。

三、更新机制：微任务队列

事件循环（Event Loop）回顾

| 宏任务 (MacroTask) |
      ↓
| 微任务 (MicroTask) | → 清空所有微任务
      ↓
| 渲染 (Render) | ← DOM 更新在此发生
      ↓
| 下一个宏任务 |

Vue 的更新策略

1. 数据变化 → 触发 setter；
2. Watcher 被推入 异步队列；
3. 使用 Promise.then（微任务）延迟执行；
4. 在当前宏任务结束前，清空队列，批量更新 DOM。

四、源码级解析：queueWatcher

核心逻辑

const queue = [];
let waiting = false;

function queueWatcher(watcher) {
  const id = watcher.id;
  
  //  去重：同一 watcher 只入队一次
  if (queue.indexOf(watcher) === -1) {
    queue.push(watcher);
  }
  
  //  延迟刷新
  if (!waiting) {
    waiting = true;
    // 使用微任务（如 Promise）延迟执行
    nextTick(flushSchedulerQueue);
  }
}

function flushSchedulerQueue() {
  // 排序：父组件先于子组件
  queue.sort((a, b) => a.id - b.id);
  
  // 批量更新
  for (let i = 0; i < queue.length; i++) {
    const watcher = queue[i];
    watcher.run(); // 执行组件更新
  }
  
  // 重置
  queue.length = 0;
  waiting = false;
}

五、实战演示

场景 1：连续修改数据

methods: {
  updateData() {
    this.message = 'Step 1';
    this.count = 1;
    this.message = 'Final'; // 只触发一次更新
    
    //  DOM 未更新
    console.log(this.$el.textContent); // 'Old Value'
    
    //  在 nextTick 中，DOM 已更新
    this.$nextTick(() => {
      console.log(this.$el.textContent); // 'Final'
    });
  }
}

场景 2：避免强制同步布局

//  反模式：强制同步布局
this.items.push(newItem);
console.log(this.listEl.scrollHeight); // 浏览器被迫同步计算布局

//  正确做法
this.items.push(newItem);
this.$nextTick(() => {
  console.log(this.listEl.scrollHeight); // 在 DOM 更新后读取
});

六、Vue 2 vs Vue 3 的差异

七、如何强制“同步”更新？

不推荐：setTimeout

this.message = 'new';
setTimeout(() => {
  console.log(this.$el.textContent); // 依赖宏任务，时机不可控
}, 0);

推荐：$nextTick

this.message = 'new';
this.$nextTick(() => {
  //  DOM 确保已更新
  console.log(this.$el.textContent);
});

结语

记住：

掌握异步更新机制，你就能：

避免 DOM 读取时机错误；
写出更高效的 Vue 代码；
理解 nextTick 的真正意义。