perf: mobile scroll, close #5191

components/vc-virtual-list/hooks/useMobileTouchMove.ts

@@ -1,9 +1,7 @@
-import supportsPassive from '../../_util/supportsPassive';
 import type { Ref } from 'vue';
-import { watch, onMounted } from 'vue';
+import { onBeforeUnmount, watch, onMounted } from 'vue';
 
 const SMOOTH_PTG = 14 / 15;
-
 export default function useMobileTouchMove(
   inVirtual: Ref<boolean>,
   listRef: Ref<HTMLDivElement | undefined>,
@@ -19,15 +17,7 @@ export default function useMobileTouchMove(
 
   const cleanUpEvents = () => {
     if (element) {
-      element.removeEventListener(
+      element.removeEventListener('touchmove', onTouchMove);
-        'touchmove',
-        onTouchMove,
-        supportsPassive
-          ? ({
-              passive: false,
-            } as EventListenerOptions)
-          : false,
-      );
       element.removeEventListener('touchend', onTouchEnd);
     }
   };
@@ -68,47 +58,28 @@ export default function useMobileTouchMove(
       touchY = Math.ceil(e.touches[0].pageY);
 
       element = e.target as HTMLElement;
-      element!.addEventListener(
+      element!.addEventListener('touchmove', onTouchMove, { passive: false });
-        'touchmove',
-        onTouchMove,
-        supportsPassive
-          ? ({
-              passive: false,
-            } as EventListenerOptions)
-          : false,
-      );
       element!.addEventListener('touchend', onTouchEnd);
     }
   };
+  const noop = () => {};
 
   onMounted(() => {
+    document.addEventListener('touchmove', noop, { passive: false });
     watch(
       inVirtual,
       val => {
-        listRef.value.removeEventListener(
+        listRef.value.removeEventListener('touchstart', onTouchStart);
-          'touchstart',
-          onTouchStart,
-          supportsPassive
-            ? ({
-                passive: false,
-              } as EventListenerOptions)
-            : false,
-        );
         cleanUpEvents();
         clearInterval(interval);
         if (val) {
-          listRef.value.addEventListener(
+          listRef.value.addEventListener('touchstart', onTouchStart, { passive: false });
-            'touchstart',
-            onTouchStart,
-            supportsPassive
-              ? ({
-                  passive: false,
-                } as EventListenerOptions)
-              : false,
-          );
         }
       },
       { immediate: true },
     );
   });
+  onBeforeUnmount(() => {
+    document.removeEventListener('touchmove', noop);
+  });
 }