Vue新手疑问：定时AJAX更新表格为何整表重渲染而非仅更新变更数据

嘿，我刚入门Vue的时候也踩过这个坑！别着急，咱们来一步步搞定它～

首先得搞清楚为什么会全量重渲染：Vue默认是用数组索引来跟踪列表项的，如果你每次AJAX请求后直接把整个dataList替换成新数组（哪怕大部分数据都没变），Vue会认为所有列表项都被替换了，自然就会重新渲染整个表格。

下面是几个实用的解决办法：

1. 给列表项加上唯一的:key属性 #

这是最关键的一步！一定要用每个数据项的唯一标识（比如id字段）作为key，绝对不能用数组索引。示例代码：

<table>
  <thead>
    <tr>
      <th>名称</th>
      <th>数值</th>
    </tr>
  </thead>
  <tbody>
    <!-- 用item.id作为key，而不是index -->
    <tr v-for="(item, index) in dataList" :key="item.id">
      <td>{{ item.name }}</td>
      <td>{{ item.value }}</td>
    </tr>
  </tbody>
</table>

Vue会通过key来识别每个节点的唯一性，只有对应key的内容发生变化时，才会更新那一行，其他行保持不动。

2. 精细化更新数据，不要直接替换整个数组 #

如果你每次直接给dataList赋值新数组，哪怕内容差异很小，Vue也会触发全量更新。改成对比新旧数据，只更新变化的部分：

// 假设你原本的代码是这样的：
// this.dataList = response.data;

// 改成精细化更新：
const newData = response.data;

// 先更新已有项的变化字段
newData.forEach(newItem => {
  const existingItem = this.dataList.find(item => item.id === newItem.id);
  if (existingItem) {
    // 用Object.assign更新对象属性，Vue能检测到变化
    Object.assign(existingItem, newItem);
  } else {
    // 新增不在原列表里的项
    this.dataList.push(newItem);
  }
});

// 处理被删除的项（如果API会返回删除的数据）
this.dataList = this.dataList.filter(item => 
  newData.some(newItem => newItem.id === item.id)
);

这样Vue只会更新那些属性发生变化的对象，而不是重新渲染整个列表。

3. 可选：给固定内容加上v-once优化性能 #

如果表格里有一些永远不会变化的字段，可以给对应的单元格加上v-once指令，让Vue只渲染一次，之后不再更新：

<td v-once>{{ item.createTime }}</td>

按照上面的方法调整后，你应该就能看到Vue只更新变化的数据，而不是整个表格重渲染啦！

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