Vue中DynamicScroller滚动后重复渲染问题排查求助

以下是几个可能导致滚动后重复渲染的原因及对应解决方案：

• size-dependencies 引用不稳定：你当前将整个item对象传给size-dependencies，如果item是接口返回的新对象（即使内容相同但引用不同），DynamicScrollerItem会判定尺寸依赖变化，触发重渲染。建议只传递影响卡片尺寸的固定字段（比如唯一标识item.hotelId），避免不必要的引用更新。

• active 属性绑定方式有误：:active="active"这种绑定会让所有DynamicScrollerItem共享同一个变量，只要active变化，所有项都会重渲染。如果active是选中项的标识，应该改成:active="item.hotelId === activeHotelId"，仅让当前选中的项更新状态。

• 列表数据data.availableData引用频繁变化：如果每次接口请求后直接替换data.availableData的引用（比如this.data.availableData = res.data），DynamicScroller会认为整个列表数据变更，触发全量重渲染。可以改用数组变异方法（如push、splice）更新数据，或者通过computed返回稳定的引用，确保只有数据真的变化时才更新。

• 子组件DTourTicketStyle无缓存导致重渲染：如果flag、roomPassengers等变量频繁变化，会导致DTourTicketStyle反复重渲染。可以给子组件添加v-memo缓存，仅在指定依赖变化时才更新。

修改后的代码示例：

<DynamicScroller
  emit-update="false"
  key-field="hotelId"
  :items="data.availableData"
  page-mode
  :min-item-size="300"
  class="scroller"
>
  <DynamicScrollerItem
    :item="item"
    :data-index="index"
    :size-dependencies="item.hotelId"
    class="py-2"
    :active="item.hotelId === activeHotelId"
  >
    <DTourTicketStyle
      v-memo="[item.hotelId, flag.searchLoading, flag.addBasketLoading, isSearchFinish, roomPassengers]"
      :disable="flag.searchLoading || flag.addBasketLoading"
      :loading="flag.addBasketLoading"
      :search-loading="isSearchFinish"
      :ticket="item"
      :room-passengers="roomPassengers"
      @select="selectHotel"
    />
  </DynamicScrollerItem>
</DynamicScroller>

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