fix(RecycleScroller): Introduce an item wrapper to reduce re-render (#742)

Co-authored-by: Guillaume Chau <guillaume.b.chau@gmail.com>

Author: ishitatsuyuki

packages/vue-virtual-scroller/src/components/ItemView.vue

@@ -0,0 +1,23 @@
+<!-- Avoir re-renders of slots -->
+
+<template>
+  <component
+    :is="itemTag"
+    class="vue-recycle-scroller__item-view"
+  >
+    <slot
+      :item="view.item"
+      :index="view.nr.index"
+      :active="view.nr.used"
+    />
+  </component>
+</template>
+
+<script>
+export default {
+  props: {
+    view: Object,
+    itemTag: String,
+  },
+}
+</script>

packages/vue-virtual-scroller/src/components/RecycleScroller.vue

@@ -26,11 +26,12 @@
       class="vue-recycle-scroller__item-wrapper"
       :class="listClass"
     >
-      <component
-        :is="itemTag"
+      <ItemView
         v-for="view of pool"
         ref="items"
         :key="view.nr.id"
+        :view="view"
+        :item-tag="itemTag"
         :style="ready
           ? [
             (disableTransform
@@ -54,12 +55,10 @@
           mouseleave: () => { hoverKey = null },
         }"
       >
-        <slot
-          :item="view.item"
-          :index="view.nr.index"
-          :active="view.nr.used"
-        />
-      </component>
+        <template #default="props">
+          <slot v-bind="props" />
+        </template>
+      </ItemView>
 
       <slot
         name="empty"
@@ -88,13 +87,15 @@ import { getScrollParent } from '../scrollparent'
 import config from '../config'
 import { props, simpleArray } from './common'
 import { supportsPassive } from '../utils'
+import ItemView from './ItemView.vue'
 
 let uid = 0
 
 export default {
   name: 'RecycleScroller',
 
   components: {
+    ItemView,
     ResizeObserver,
   },
 
@@ -205,6 +206,9 @@ export default {
       pool: [],
       totalSize: 0,
       ready: false,
+      /**
+       * We need the key of the hovered item to prevent ItemView that gets recycled to keep the hover state.
+       */
       hoverKey: null,
     }
   },