如何动态更新列表组件数据

“动态更新列表组件数据”在不同技术栈下写法不同。下面我按常见前端场景给你总结几种主流做法，你可以对号入座。

一、原生 JavaScript（无框架）

1. 重新渲染整个列表

const data = ['A', 'B', 'C'];

function renderList() {
  const ul = document.getElementById('list');
  ul.innerHTML = '';
  data.forEach(item => {
    const li = document.createElement('li');
    li.textContent = item;
    ul.appendChild(li);
  });
}

renderList();

// 动态更新
data.push('D');
renderList();

✅ 简单
❌ 性能一般（列表大时不推荐）

2. 只更新变化的部分（增量更新）

function addItem(item) {
  const li = document.createElement('li');
  li.textContent = item;
  document.getElementById('list').appendChild(li);
}

✅ 性能好
✅ 适合追加数据（如聊天、日志）

二、Vue（Vue 2 / Vue 3）

Vue 3 示例

<template>
  <ul>
    <li v-for="item in list" :key="item.id">
      {{ item.name }}
    </li>
  </ul>
  <button @click="addItem">添加</button>
</template>

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

const list = ref([
  { id: 1, name: 'A' },
  { id: 2, name: 'B' }
])

function addItem() {
  list.value.push({
    id: Date.now(),
    name: 'New'
  })
}
</script>

✅ 响应式自动更新 ✅ 必须保证 key 唯一

三、React

函数组件 + useState

import { useState } from 'react'

function List() {
  const [list, setList] = useState(['A', 'B'])

  function addItem() {
    setList([...list, 'C'])
  }

  return (
    <div>
      <ul>
        {list.map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>
      <button onClick={addItem}>添加</button>
    </div>
  )
}

✅ 状态驱动 UI
❌ 不要直接修改原数组

四、动态更新常见场景

1. 轮询更新

setInterval(() => {
  fetch('/api/list').then(res => res.json())
}, 5000)

2. WebSocket 实时更新

socket.on('data', newData => {
  list.value = newData
})

3. 分页 / 滚动加载

list.push(...newItems)

五、动态更新注意事项

• ✅ 使用唯一 key
• ✅ 避免直接修改原数据（React 尤其重要）
• ✅ 大数据用虚拟列表（vue-virtual-scroller / react-window）

如果你能告诉我：

• 用的是 Vue / React / 原生 / 小程序
• 是 追加、替换、删除、排序 哪种更新

我可以给你更精确的代码示例。