search

Akryum / vue-virtual-scroller

⚡️ Blazing fast scrolling for any amount of data
https://vue-virtual-scroller-demo.netlify.app
9.48k stars 901 forks source link

Vue3,when i use component in DynamicScrollerItem, the component will rerender after it go back on-screen.How can i avoid duplicate rendering? #714

Open mazili opened 2 years ago

mazili commented 2 years ago

It's in vue3. Here is my code.

 <DynamicScroller
    :items="chat.data"
    :min-item-size="65"
    key-field="id"
    class="chat-wrapper"
    id="chat-wrapper"
    @buffer="200">
    <template v-slot="{item, index, active}">
      <DynamicScrollerItem :item="item" :active="active" :data-index="index" :sizeDependencies="[item.message, item.cf]">
          <keep-alive>
              <component :is="item?.cf?.name" v-bind="item?.cf?.props"> 
    </component>
           </keep-alive>
     </DynamicScrollerItem>
</DynamicScroller>
darkangel081195 commented 2 years ago

Facing same issue. The component is getting re-rendered when again painted on screen, calling all the lifeCycle hooks. Did you find a work around ?