向对象数组推送元素时实现迭代更新及浏览器视图实时刷新

核心思路 #

要实现需求的关键点在于：

• 确保数组的响应式更新（框架环境）或手动触发DOM更新（原生环境），保证每次添加元素后视图同步变化
• 循环迭代创建并推送对象，每次推送后执行数组元素的更新逻辑
• 使用each类迭代器遍历数组（可选用数组原生forEach或Lodash的_.each）
• 避免UI阻塞，给浏览器留足渲染时间

方案一：Vue3 环境（推荐，响应式天然支持） #

利用Vue的响应式系统，无需手动操作DOM，每次推送元素后视图自动更新：

<template>
  <div class="item-list">
    <!-- 用v-for遍历数组，绑定唯一key保证渲染效率 -->
    <div v-for="item in itemList" :key="item.id" class="item">
      {{ item.name }} - 更新后值：{{ item.value }}
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import _ from 'lodash' // 如需使用Lodash的each迭代器

// 声明响应式数组
const itemList = ref([])

const batchAddItems = async () => {
  for (let i = 0; i < 1000; i++) {
    // 1. 创建新对象并推入数组
    const newItem = {
      id: i + 1,
      name: `条目 ${i + 1}`,
      value: Math.floor(Math.random() * 100)
    }
    itemList.value.push(newItem)

    // 2. 使用each迭代器遍历数组，更新元素（此处以更新刚添加的元素为例）
    _.each(itemList.value, (item, index) => {
      if (index === itemList.value.length - 1) {
        // 每次迭代更新当前元素的属性
        item.value += 1
      }
    })

    // 3. 让浏览器完成当前帧渲染，避免UI阻塞
    await new Promise(resolve => requestAnimationFrame(resolve))
  }
}

// 页面加载时执行批量添加
batchAddItems()
</script>

<style scoped>
.item-list {
  padding: 1rem;
}
.item {
  margin: 0.3rem 0;
}
</style>

方案二：原生JavaScript 环境 #

原生环境下需手动操作DOM实现视图更新，同时保证每次添加后实时渲染：

<div id="itemContainer"></div>

<script>
const itemContainer = document.getElementById('itemContainer')
const itemList = []

async function batchAddItems() {
  for (let i = 0; i < 1000; i++) {
    // 1. 创建新对象并推入数组
    const newItem = {
      id: i + 1,
      name: `条目 ${i + 1}`,
      value: Math.floor(Math.random() * 100)
    }
    itemList.push(newItem)

    // 2. 使用forEach（等价each迭代器）遍历数组，更新元素
    itemList.forEach((item, index) => {
      if (index === itemList.length - 1) {
        item.value += 2 // 示例更新逻辑
      }
    })

    // 3. 实时更新视图：直接追加新元素到容器（比重新渲染全部更高效）
    const itemElement = document.createElement('div')
    itemElement.textContent = `${newItem.name} - 更新后值：${newItem.value}`
    itemContainer.appendChild(itemElement)

    // 避免UI卡顿，等待浏览器渲染当前帧
    await new Promise(resolve => requestAnimationFrame(resolve))
  }
}

// 启动批量添加
batchAddItems()
</script>

关键注意事项 #

• 性能优化：原生环境下避免每次重新渲染整个列表，采用追加元素的方式；Vue环境下务必给v-for绑定唯一key，提升虚拟DOM渲染效率
• 迭代器选择：若习惯使用Lodash/Underscore的_.each，需提前引入对应库；数组原生forEach可直接替代，功能一致
• UI阻塞处理：使用requestAnimationFrame让浏览器在每次添加元素后完成当前帧渲染，确保用户能看到实时更新的效果

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