数据集翻页时Stimolsoft全页面组件重复问题如何解决

• 修正列表渲染的key绑定规则
  组件重复渲染的最高频诱因是列表项key使用了数组索引，Stimolsoft的数据组件在翻页追加数据时，数组索引会整体偏移，虚拟DOM diff逻辑会判定所有列表项身份发生变化，触发全量节点重挂载。必须绑定数据项自带的全局唯一业务主键作为key，禁止使用遍历索引。
  错误写法示例：

  <!-- 错误：用索引做key，翻页时索引偏移触发全量重绘 -->
  <StiDataRow v-for="(item, index) in tableData" :key="index" />
  

  正确写法示例：

  <!-- 正确：用数据唯一主键做key，已有节点不会被判定为更新 -->
  <StiDataRow v-for="item in tableData" :key="item.uniqueRecordId" />
  

• 调整数据容器的分页默认配置
  Stimolsoft自带的StiDataGrid、StiList、StiTreeList等数据类容器，默认开启resetOnPageChange配置，切页时会清空已渲染的DOM缓存，重新挂载所有历史加载页+当前页的组件。直接在组件上绑定配置关闭该逻辑即可：

  <StiDataGrid
    :data="tableData"
    :reset-on-page-change="false"
    <!-- 增量加载场景开启追加模式，不替换已有数据集 -->
    :append-data-on-page-turn="true"
  />
  

• 隔离无关组件的渲染依赖
  页面中与分页数据无关的固定组件（比如筛选栏、操作按钮组、自定义表头插槽、侧边栏等），不要让其依赖分页状态（当前页码、总条数、加载状态等）。可以使用Stimolsoft内置的StiMemoWrapper组件包裹，或对应框架自带的缓存能力（Vue下用v-memo、React下用memo），仅绑定组件自身需要的状态作为渲染依赖，避免分页状态变更触发无关组件重渲染。
• 修正响应式状态的透传逻辑
  禁止将完整的分页响应式对象直接透传给所有子组件，这类写法会导致只要分页对象任意字段更新，所有接收该props的子组件都会触发重渲染。需要做精准传参，子组件仅接收自身逻辑必需的字段，大体积静态数据可以用浅响应式（shallowRef/shallowReactive）减少不必要的依赖收集。
• 调整虚拟滚动的预渲染阈值
  如果开启了Stimolsoft的虚拟滚动能力，检查prerenderCount配置项，该值如果设置为接近总数据量的数值，切页时会对所有已加载的列表节点做位置重算，触发重复渲染。将该值调整为视口可容纳项数的1.5~2倍即可，仅保留视口附近的节点预渲染，减少无意义的计算开销。

排查优先级建议：先检查列表key绑定、容器组件分页配置两个项，90%以上的该类异常都是这两个配置错误导致，无需一开始就做复杂的性能埋点排查。

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