Polymer中新增dom-repeat项时避免重建所有元素的方法

嘿，这个问题我在Polymer项目里碰到过好多次，核心原因是dom-repeat默认的跟踪机制在搞鬼，咱们一步一步解决：

核心解决方案：给dom-repeat添加唯一key属性 #

默认情况下，dom-repeat是通过数组的索引来识别列表项的。当你往数组里新增元素（尤其是在非末尾位置），或者修改数组顺序时，所有项的索引都会发生变化，导致dom-repeat误以为所有元素都需要重建。而指定一个唯一的key后，它会通过这个唯一标识来追踪每个项，只会对新增/删除/修改的项做DOM操作，不会全量重建。

具体操作步骤 #

1. 确保你的数据列表中的每个项都有一个唯一且稳定的标识字段，比如id、uuid这类不会随数据更新而变化的字段。
2. 在dom-repeat标签上添加key属性，值为你刚才的唯一字段名：

<dom-repeat items="{{dataList}}" key="itemId">
  <template>
    <!-- 你的列表项元素，包含iron-ajax请求 -->
    <my-list-item data="{{item}}"></my-list-item>
  </template>
</dom-repeat>

关键注意事项 #

• 务必保证key对应的字段是不可变且全局唯一的：如果用了会变化的字段（比如某个可编辑的内容），dom-repeat会误判元素需要重建，反而达不到优化效果。
• 使用Polymer的数组突变方法添加新项：比如用this.push('dataList', newItem)，而不是直接替换整个数组（this.dataList = [...this.dataList, newItem]）。Polymer的数组方法会触发更高效的增量更新，配合key属性能完美实现只渲染新项。
• 列表项内的iron-ajax请求逻辑：如果你的请求是在元素的connectedCallback或ready生命周期里触发的，那么添加key后，已有元素不会被重建，自然不会重复发起请求；如果用了iron-ajax的auto属性，也可以配合if条件判断确保只在元素首次渲染时执行请求。

额外性能优化（可选） #

如果你的列表数据量很大，还可以结合dom-repeat的initial-count属性做懒加载，只渲染可视区域内的元素，进一步降低DOM构建和请求的开销：

<dom-repeat items="{{dataList}}" key="itemId" initial-count="10" scroll-target="listContainer">
  <!-- 列表项模板 -->
</dom-repeat>
<div id="listContainer" style="overflow-y: auto; height: 500px;"></div>

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