fix: Rewrite view (re-)assignment logic (#743)

Author: Akryum

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

@@ -277,8 +277,10 @@ export default {
   created () {
     this.$_startIndex = 0
     this.$_endIndex = 0
+    // Visible views by their key
     this.$_views = new Map()
-    this.$_unusedViews = new Map()
+    // Pools of recycled views, by view type
+    this.$_recycledPools = new Map()
     this.$_scrollDirty = false
     this.$_lastUpdateScrollPosition = 0
 
@@ -318,7 +320,17 @@ export default {
   },
 
   methods: {
-    addView (pool, index, item, key, type) {
+    getRecycledPool (type) {
+      const recycledPools = this.$_recycledPools
+      let recycledPool = recycledPools.get(type)
+      if (!recycledPool) {
+        recycledPool = []
+        recycledPools.set(type, recycledPool)
+      }
+      return recycledPool
+    },
+
+    createView (pool, index, item, key, type) {
       const nr = markRaw({
         id: uid++,
         index,
@@ -335,18 +347,31 @@ export default {
       return view
     },
 
-    unuseView (view, fake = false) {
-      const unusedViews = this.$_unusedViews
-      const type = view.nr.type
-      let unusedPool = unusedViews.get(type)
-      if (!unusedPool) {
-        unusedPool = []
-        unusedViews.set(type, unusedPool)
+    getRecycledView (type) {
+      const recycledPool = this.getRecycledPool(type)
+      if (recycledPool && recycledPool.length) {
+        const view = recycledPool.pop()
+        view.nr.used = true
+        return view
+      } else {
+        return null
       }
-      unusedPool.push(view)
-      if (!fake) {
-        view.nr.used = false
-        view.position = -9999
+    },
+
+    removeAndRecycleView (view) {
+      const type = view.nr.type
+      const recycledPool = this.getRecycledPool(type)
+      recycledPool.push(view)
+      view.nr.used = false
+      view.position = -9999
+      this.$_views.delete(view.nr.key)
+    },
+
+    removeAndRecycleAllViews () {
+      this.$_views.clear()
+      this.$_recycledPools.clear()
+      for (let i = 0, l = this.pool.length; i < l; i++) {
+        this.removeAndRecycleView(this.pool[i])
       }
     },
 
@@ -397,7 +422,7 @@ export default {
       }
     },
 
-    updateVisibleItems (checkItem, checkPositionDiff = false) {
+    updateVisibleItems (itemsChanged, checkPositionDiff = false) {
       const itemSize = this.itemSize
       const gridItems = this.gridItems || 1
       const itemSecondarySize = this.itemSecondarySize || itemSize
@@ -408,7 +433,6 @@ export default {
       const count = items.length
       const sizes = this.sizes
       const views = this.$_views
-      const unusedViews = this.$_unusedViews
       const pool = this.pool
       const itemIndexByKey = this.itemIndexByKey
       let startIndex, endIndex
@@ -522,19 +546,30 @@ export default {
 
       const continuous = startIndex <= this.$_endIndex && endIndex >= this.$_startIndex
 
-      // Unuse views that are no longer visible
-      if (continuous) {
+      if (this.$_continuous !== continuous) {
+        if (continuous) {
+          views.clear()
+          unusedViews.clear()
+          for (let i = 0, l = pool.length; i < l; i++) {
+            view = pool[i]
+            this.unuseView(view)
+          }
+        }
+        this.$_continuous = continuous
+      } else if (continuous) {
         for (let i = 0, l = pool.length; i < l; i++) {
           view = pool[i]
           if (view.nr.used) {
             // Update view item index
             if (checkItem) {
-              view.nr.index = itemIndexByKey[view.item[keyField]]
+              view.nr.index = items.findIndex(
+                item => keyField ? item[keyField] === view.item[keyField] : item === view.item,
+              )
             }
 
             // Check if index is still in visible range
             if (
-              view.nr.index == null ||
+              view.nr.index === -1 ||
               view.nr.index < startIndex ||
               view.nr.index >= endIndex
             ) {
@@ -546,11 +581,13 @@ export default {
 
       const unusedIndex = continuous ? null : new Map()
 
-      let item, type
+      let item, type, unusedPool
       let v
       for (let i = startIndex; i < endIndex; i++) {
+        const elementSize = itemSize || sizes[i].size
+        if (!elementSize) continue
         item = items[i]
-        const key = keyField ? item[keyField] : item
+        const key = keyField ? item[keyField] : i
         if (key == null) {
           throw new Error(`Key is ${key} on item (keyField is '${keyField}')`)
         }
@@ -561,17 +598,20 @@ export default {
           continue
         }
 
-        type = item[typeField]
-
-        let unusedPool = unusedViews.get(type)
-        let newlyUsedView = false
-
         // No view assigned to item
         if (!view) {
+          type = item[typeField]
+          unusedPool = unusedViews.get(type)
+
           if (continuous) {
             // Reuse existing view
             if (unusedPool && unusedPool.length) {
               view = unusedPool.pop()
+              view.item = item
+              view.nr.used = true
+              view.nr.index = i
+              view.nr.key = key
+              view.nr.type = type
             } else {
               view = this.addView(pool, i, item, key, type)
             }
@@ -588,7 +628,13 @@ export default {
             }
 
             view = unusedPool[v]
+            view.item = item
+            view.nr.used = true
+            view.nr.index = i
+            view.nr.key = key
+            view.nr.type = type
             unusedIndex.set(type, v + 1)
+            v++
           }
 
           // Assign view to item
@@ -601,16 +647,8 @@ export default {
 
           newlyUsedView = true
         } else {
-          // View already assigned to item
-          if (!view.nr.used) {
-            view.nr.used = true
-            view.nr.index = i
-            newlyUsedView = true
-            if (unusedPool) {
-              const index = unusedPool.indexOf(view)
-              if (index !== -1) unusedPool.splice(index, 1)
-            }
-          }
+          view.nr.used = true
+          view.item = item
         }
 
         // Always set item in case it's a new object with the same key