![image](https://developer.qcloudimg.com/http-save/yehe-1209475/ff35e18727e71015524d9c1503239dcd.png)

## 前言

你好，我是喵喵侠，是一名前端开发。

在 Vue 中，我们常常使用异步操作来更新数据和视图，而这些操作的执行顺序往往与 JavaScript 的事件循环和微任务队列紧密相关。你可能遇到过这样的问题：在 `setTimeout`​ 或 `Promise.then` 中修改数据后，DOM 并没有立即更新，这让人很困惑。为什么异步数据更新没有立刻反映到视图中？这其实与 Vue 的更新机制、事件循环的原理、以及微任务队列的执行顺序密切相关。

今天我们就来深入分析一下 Vue 中的异步更新机制，理解它是如何利用事件循环和微任务来控制视图更新的，解决你在实际开发中可能遇到的 bug 和性能问题。

## 宏任务与微任务队列

在 JavaScript 中，事件循环和任务队列的工作原理决定了异步代码的执行顺序。为了准确理解 Vue 的异步更新，我们先来回顾一下宏任务和微任务的基本概念。

### 1. 宏任务（Macro Tasks）

宏任务包括了 `setTimeout`​、`setInterval`​、`I/O` 操作、UI 渲染等，它们是事件循环中的主要任务。每次执行一个宏任务时，JavaScript 会先从任务队列中取出一个任务执行，然后进入渲染阶段，接着再取下一个宏任务执行。

### 2. 微任务（Micro Tasks）

微任务主要是由 `Promise.then`​、`MutationObserver`​、`process.nextTick` 等产生的，它们的执行优先级高于宏任务。每当一个宏任务执行完后，JavaScript 会立即执行所有的微任务，而不会执行下一个宏任务，直到微任务队列为空。

这两个队列之间的关系是：​**微任务队列在每个宏任务之后立刻执行**，并且所有微任务会在 DOM 更新之前完成。

### 宏任务和微任务队列图解

```plaintext
Event Loop (事件循环)
--------------------------------------------------------------
|             Macro Task             |         Micro Task        |
--------------------------------------------------------------
|  1. Execute setTimeout()  <--- Macro |    1. Promise.then()      |
|  2. Execute I/O                <--- Macro |    2. nextTick()         |
--------------------------------------------------------------
```

## `Promise.then`​ vs `setTimeout` 执行顺序

当我们同时使用 `Promise.then`​ 和 `setTimeout` 时，它们的执行顺序是非常值得注意的：

1. **​`setTimeout`​** 是宏任务，它会被放入宏任务队列。
2. **​`Promise.then`​** 是微任务，它会被放入微任务队列，并且在当前宏任务执行完后，所有微任务会被立即执行。

这意味着，即使 `setTimeout`​ 的回调函数在 `Promise.then`​ 之后被调用，但由于微任务队列的优先级更高，`Promise.then`​ 中的回调会在 `setTimeout` 中的回调之前执行。

```javascript
console.log('Start');

setTimeout(() => {
  console.log('setTimeout');
}, 0);

Promise.resolve().then(() => {
  console.log('Promise');
});

console.log('End');
```

**输出顺序**：

```plaintext
Start
End
Promise
setTimeout
```

### 解释：

- `"Start"`​ 和 `"End"` 是同步代码，立刻执行。
- `Promise.then`​ 的回调被放入微任务队列，在宏任务队列中的 `setTimeout` 之前执行。
- `setTimeout` 被放入宏任务队列，等到微任务队列为空后才执行。

## Vue 的更新机制与事件循环

在 Vue 中，视图更新是由 Vue 内部的 `flush scheduler` 控制的。Vue 会将视图更新的任务放入一个微任务队列中，并在当前宏任务执行完成后立即刷新视图。

### 1. Vue 的 `flush scheduler`​ 和 `queueJob` 原理

当我们修改 Vue 中的响应式数据时，Vue 并不会立即更新 DOM，而是将视图更新任务加入到一个队列中。Vue 会在事件循环的微任务阶段执行更新操作，而这个过程的关键函数就是 `queueJob`。它会将更新任务推送到微任务队列中，从而确保在所有同步任务执行完后，再进行视图的更新。

```javascript
Vue.nextTick(() => {
  console.log('DOM updated');
});
```

在 Vue 中，`nextTick` 会把 DOM 更新的操作推迟到下一个“事件循环的微任务”中执行。它确保在当前所有的数据更改和 DOM 操作完成后再更新视图。

### 2. 为什么 `setTimeout` 中数据没有更新？

有时候你可能会发现，在 `setTimeout` 或异步函数中修改的数据并没有立刻反映到视图中。这个现象的原因就在于 Vue 的更新是异步的，并且它依赖于事件循环。

```javascript
setTimeout(() => {
  this.message = 'Updated';
  console.log(this.$el.innerHTML);  // 这里读取的DOM还没有更新
}, 0);
```

在这个例子中，`setTimeout`​ 是宏任务，虽然它在当前宏任务执行完成后立刻执行，但 Vue 的视图更新任务是通过微任务队列执行的。这意味着在 `setTimeout` 执行时，DOM 更新还没有完成，因此你会看到更新后的数据还没有渲染到页面上。

## `nextTick` 的 3 种常见用法

`nextTick` 是 Vue 提供的一个工具函数，它用于在下一个“事件循环”中执行回调。通常它用于确保在数据更新后，DOM 已经渲染完成。

### 1. 获取最新的 DOM

```javascript
this.message = 'Updated';
this.$nextTick(() => {
  console.log(this.$el.innerHTML);  // 这里读取的DOM是最新的
});
```

在这个例子中，`nextTick` 确保我们在 DOM 更新后再执行回调，避免读取旧的 DOM 内容。

### 2. 与异步操作结合使用

```javascript
setTimeout(() => {
  this.message = 'Updated';
  this.$nextTick(() => {
    console.log(this.$el.innerHTML);  // 在数据更新后，DOM 已更新
  });
}, 0);
```

这里的 `nextTick` 保证了数据修改后的 DOM 更新。

### 3. 在 `async/await`​ 中使用 `nextTick`

```javascript
async function updateData() {
  this.message = 'Updated';
  await this.$nextTick();
  console.log(this.$el.innerHTML);  // 这里读取的是更新后的 DOM
}
```

在 `async`​ 函数中，我们可以使用 `await this.$nextTick()` 来确保数据更新后的 DOM 被渲染。

## 真实 bug 示例：异步更新后立即读 DOM 得不到最新值

一个常见的 bug 是，在数据更新后立即读取 DOM 的值，却发现返回的是旧值。这是因为 Vue 会把 DOM 更新放入微任务队列中，等到当前宏任务执行完再更新视图。如果在数据更新后直接读取 DOM，就会拿到未更新的旧值。

```javascript
this.message = 'Hello';
console.log(this.$el.innerHTML);  // 获取的还是旧值
```

要解决这个问题，你需要确保在 DOM 更新完成后再读取它，通常可以使用 `nextTick` 来解决。

```javascript
this.message = 'Hello';
this.$nextTick(() => {
  console.log(this.$el.innerHTML);  // 获取的是更新后的值
});
```

## 总结

Vue 中的数据更新和视图渲染依赖于事件循环和微任务队列的机制。通过理解 JavaScript 的事件循环、宏任务和微任务的执行顺序，我们可以更清楚地理解 `setTimeout`​、`Promise.then`​、以及 `nextTick`​ 的行为。在 Vue 中，`nextTick` 是确保视图更新完成的关键工具，它可以帮助我们避免异步操作中的 DOM 不更新的问题。在实际开发中，掌握这些细节，能够帮助你更好地管理数据更新与视图渲染，避免因异步更新带来的潜在 bug。


在 Vue 中，我们常常使用异步操作来更新数据和视图，而这些操作的执行顺序往往与 JavaScript 的事件循环和微任务队列紧密相关。你可能遇到过这样的问题：在 setTimeout​ 或 Promise.then 中修改数据后，DOM 并没有立即更新，这让人很困惑。为什么异步数据更新没有立刻反映到视图中？这其实与 Vue 的更新机制、事件循环的原理、以及微任务队列的执行顺序密切相关。

Vue 中的事件循环与视图更新：为什么 setTimeout 内的数据没有更新？

前端

深入解析Vue异步更新机制与事件循环原理，揭秘setTimeout和Promise.then的执行顺序差异，掌握nextTick的正确使用方法，解决DOM更新不及时的常见问题，提升前端开发效率。

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

Vue 中的事件循环与视图更新：为什么 setTimeout 内的数据没有更新？-腾讯云开发者社区-腾讯云

Vue 中的事件循环与视图更新：为什么 setTimeout 内的数据没有更新？

Vue 中的事件循环与视图更新：为什么 setTimeout 内的数据没有更新？

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐