VUE：异步更新

大前端 vue

发布时间 : 2026-03-01 00:00

字数:523 阅读 :

是什么
异步更新的好处：性能优化
异步更新会有的问题

是什么

Vue的异步更新是Vue在性能优化方面的一个核心策略。简单来说，当数据发生变化时，Vue不会立即更新DOM，而是将这些变更操作存入一个队列，在同一个事件循环中，无论数据变化多少次，最终只会被更新一次。

<template>
  <view>
    <view id="counter">{{ count }}</view>
    <button @click="add">增加</button>
  </view>
</template>

<script setup>
import { ref } from 'vue'

const count = ref(0)

const add = () => {
  // 连续修改3次数据
  count.value = 1
  count.value = 2  
  count.value = 3
  
  console.log('数据现在是:', count.value)  // 输出: 3
}
</script>

异步更新的好处：性能优化

// ❌ 如果是同步更新（假设的糟糕设计）
count.value = 1  → 立即更新DOM (显示1)
count.value = 2  → 立即更新DOM (显示1→2)  
count.value = 3  → 立即更新DOM (显示2→3)
// DOM被更新了3次！浪费性能

// ✅ Vue的异步更新（实际的工作方式）
count.value = 1  → 记录到队列
count.value = 2  → 合并更新（取消1，改为2）
count.value = 3  → 合并更新（取消2，改为3）
// 所有同步代码执行完后，一次性更新DOM (0直接变成3)
// DOM只更新了1次！性能更好

减少DOM操作：从3次减少到1次
提升性能：避免不必要的渲染
节省资源：特别是当有大量数据变化时

异步更新会有的问题

<template>
  <view>
    <view id="counter">{{ count }}</view>
    <button @click="showDOM">点我</button>
  </view>
</template>

<script setup>
import { ref } from 'vue'

const count = ref(0)

const showDOM = () => {
  count.value = 5  // 修改数据
  
  // ⚠️ 问题：想获取最新的DOM内容
  const domText = document.getElementById('counter').textContent
  console.log('DOM显示的是:', domText)  // 输出: 0 (不是5！)
  
  // 这就是异步更新带来的问题
  // 数据变了，但DOM还没来得及更新
}
</script>

问题是什么？

数据已经从0变成了5
但DOM还是显示0
因为DOM更新是异步的，还没执行