perf(runtime-vapor): fast path to replace all rows

Author: johnsoncodehk

Diff for: packages/runtime-vapor/src/apiCreateFor.ts

@@ -85,8 +85,8 @@ export const createFor = (
   const parentAnchor = __DEV__ ? createComment('for') : createTextNode()
   const frag = new VaporFragment(oldBlocks)
   const instance = currentInstance!
-  const canUseFastRemove = flags & VaporVForFlags.FAST_REMOVE
-  const isComponent = flags & VaporVForFlags.IS_COMPONENT
+  const canUseFastRemove = !!(flags & VaporVForFlags.FAST_REMOVE)
+  const isComponent = !!(flags & VaporVForFlags.IS_COMPONENT)
   const selectors: {
     deregister: (key: any) => void
     cleanup: () => void
@@ -196,28 +196,88 @@ export const createFor = (
           pendingNews.push([i, item, key])
         }
 
+        let pendingMountsLength = 0
+
+        const pendingMounts: [
+          index: number,
+          item: ReturnType<typeof getItem>,
+          key: any,
+          anchorIndex: number,
+        ][] = new Array(newLength)
+        const moveOrMount = (
+          index: number,
+          item: ReturnType<typeof getItem>,
+          key: any,
+          anchorIndex: number,
+        ) => {
+          const oldIndex = oldKeyToIndexMap.get(key)
+          if (oldIndex !== undefined) {
+            const block = (newBlocks[index] = oldBlocks[oldIndex])
+            update(block, ...item)
+            insert(
+              block,
+              parent!,
+              anchorIndex === -1
+                ? defaultAnchor
+                : normalizeAnchor(newBlocks[anchorIndex].nodes),
+            )
+            oldKeyToIndexMap.delete(key)
+          } else {
+            pendingMounts[pendingMountsLength++] = [
+              index,
+              item,
+              key,
+              anchorIndex,
+            ]
+          }
+        }
+
         for (let i = pendingNews.length - 1; i >= 0; i--) {
           const [index, item, key] = pendingNews[i]
           moveOrMount(
-            oldKeyToIndexMap,
-            source,
             index,
             item,
             key,
-            index < prepareLength - 1
-              ? normalizeAnchor(newBlocks[index + 1].nodes)
-              : defaultAnchor,
+            index < prepareLength - 1 ? index + 1 : -1,
           )
         }
 
         for (let i = prepareLength; i < newLength - right; i++) {
           const item = getItem(source, i)
           const key = getKey.apply(null, item)
-          moveOrMount(oldKeyToIndexMap, source, i, item, key, defaultAnchor)
+          moveOrMount(i, item, key, -1)
         }
 
+        const shouldUseFastRemove = pendingMountsLength === newLength
+
         for (const i of oldKeyToIndexMap.values()) {
-          unmount(oldBlocks[i])
+          unmount(
+            oldBlocks[i],
+            !(shouldUseFastRemove && canUseFastRemove),
+            !shouldUseFastRemove,
+          )
+        }
+        if (shouldUseFastRemove) {
+          for (const selector of selectors) {
+            selector.cleanup()
+          }
+        }
+        if (shouldUseFastRemove && canUseFastRemove) {
+          parent!.textContent = ''
+          parent!.appendChild(parentAnchor)
+        }
+
+        for (let i = 0; i < pendingMountsLength; i++) {
+          const [index, item, key, anchorIndex] = pendingMounts[i]
+          mount(
+            source,
+            index,
+            item,
+            key,
+            anchorIndex === -1
+              ? defaultAnchor
+              : normalizeAnchor(newBlocks[anchorIndex].nodes),
+          )
         }
       }
     }
@@ -272,25 +332,6 @@ export const createFor = (
     return block
   }
 
-  const moveOrMount = (
-    keyToOldIndexMap: Map<any, number>,
-    source: ResolvedSource,
-    index: number,
-    item: ReturnType<typeof getItem>,
-    key: any,
-    anchor: Node,
-  ) => {
-    const oldIndex = keyToOldIndexMap.get(key)
-    if (oldIndex !== undefined) {
-      const block = (newBlocks[index] = oldBlocks[oldIndex])
-      update(block, ...item)
-      insert(block, parent!, anchor)
-      keyToOldIndexMap.delete(key)
-    } else {
-      mount(source, index, item, key, anchor)
-    }
-  }
-
   const update = (
     { itemRef, keyRef, indexRef }: ForBlock,
     newItem: any,
@@ -308,16 +349,16 @@ export const createFor = (
     }
   }
 
-  const unmount = (
-    { nodes, scope, key }: ForBlock,
-    doRemove = true,
-    doDeregister = true,
-  ) => {
-    scope && scope.stop()
-    doRemove && removeBlock(nodes, parent!)
+  const unmount = (block: ForBlock, doRemove = true, doDeregister = true) => {
+    if (!isComponent) {
+      block.scope!.stop()
+    }
+    if (doRemove) {
+      removeBlock(block.nodes, parent!)
+    }
     if (doDeregister) {
       for (const selector of selectors) {
-        selector.deregister(key)
+        selector.deregister(block.key)
       }
     }
   }