Vue3+Pinia循环更新Store时如何仅更新进度条、延迟其余DOM更新？

要实现循环重放操作时仅更新进度条、延迟其他DOM更新到循环结束，核心思路是拆分状态更新逻辑：把操作的核心状态先存到非响应式临时变量中，循环过程中只更新绑定进度条的独立响应式状态，最后一次性同步核心状态到Pinia触发全量更新。

具体实现步骤 #

1. 改造Pinia Store #

在Store中拆分响应式状态：一个专门用于进度条的replayProgress，以及实际业务数据的状态。循环过程中先在临时变量上执行操作，最后批量同步到响应式状态。

// stores/app.js
import { defineStore } from 'pinia'

export const useAppStore = defineStore('app', {
  state: () => ({
    // 业务核心响应式状态，绑定页面大部分组件
    businessData: {},
    // 仅绑定进度条的响应式状态，单独更新不影响其他组件
    replayProgress: 0
  }),
  actions: {
    async replayUserHistory(history) {
      // 拷贝当前状态到临时变量，避免直接修改响应式状态触发更新
      const tempData = { ...this.businessData }
      const totalSteps = history.length

      for (let i = 0; i < totalSteps; i++) {
        // 1. 在临时变量上执行操作，无响应式触发
        const action = history[i]
        switch (action.type) {
          case 'modify':
            tempData[action.target] = action.payload
            break
          case 'add':
            tempData.list = [...tempData.list, action.payload]
            break
          // 根据你的操作类型扩展逻辑
        }

        // 2. 更新进度条状态，仅触发进度条组件的DOM更新
        this.replayProgress = Math.floor(((i + 1) / totalSteps) * 100)

        // 3. 让出线程给浏览器渲染进度条，用requestAnimationFrame比sleep(0)更贴合渲染周期
        await new Promise(resolve => requestAnimationFrame(resolve))
      }

      // 4. 循环结束后，一次性同步临时数据到响应式状态，触发一次全页更新
      this.businessData = tempData
      // 重置进度条
      this.replayProgress = 0
    }
  }
})

2. 组件中使用 #

在组件里，进度条仅绑定replayProgress，其他业务组件绑定businessData，这样循环过程中只有进度条会实时更新，业务组件要等到循环结束才会刷新。

<template>
  <!-- 进度条组件，仅依赖replayProgress -->
  <div class="replay-progress">
    <div class="progress-fill" :style="{ width: `${store.replayProgress}%` }"></div>
  </div>

  <!-- 业务组件，依赖businessData，仅在循环结束后更新 -->
  <div class="content-area">
    <p>当前数据：{{ store.businessData.currentValue }}</p>
    <ul>
      <li v-for="item in store.businessData.list" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>

  <button @click="startReplay">开始重放操作</button>
</template>

<script setup>
import { useAppStore } from '@/stores/app'

const store = useAppStore()
// 模拟用户操作历史
const userHistory = [
  { type: 'modify', target: 'currentValue', payload: '第一步操作' },
  { type: 'add', payload: { id: 1, name: '新增项1' } },
  // ... 更多操作
]

const startReplay = async () => {
  await store.replayUserHistory(userHistory)
}
</script>

<style scoped>
.replay-progress {
  height: 8px;
  width: 100%;
  background: #eee;
  border-radius: 4px;
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  background: #42b983;
  transition: width 0.1s ease;
}
</style>

为什么之前的await sleep(0)会触发全页更新？ #

await sleep(0)本质是在微任务队列中触发Vue的更新机制，而如果循环中每次都修改了Pinia的业务状态，Vue会把这些状态变化收集起来，在微任务执行时触发所有依赖该状态的组件更新，导致全页重绘。

而上面的方案中，业务状态的修改被转移到了非响应式的临时变量，只有进度条的独立状态在循环中更新，因此每次微任务只会触发进度条组件的渲染，大幅减少性能开销。

内容的提问来源于stack exchange，提问作者DodgerB