perf: virtual list remove eventListener

components/vc-virtual-list/List.jsx

@@ -7,7 +7,7 @@ import useFrameWheel from './hooks/useFrameWheel';
 import useMobileTouchMove from './hooks/useMobileTouchMove';
 import useOriginScroll from './hooks/useOriginScroll';
 import PropTypes from '../_util/vue-types';
-import { computed, nextTick, reactive, watchEffect } from 'vue';
+import { computed, nextTick, onBeforeUnmount, reactive, watchEffect } from 'vue';
 import classNames from '../_util/classNames';
 import createRef from '../_util/createRef';
 
@@ -212,18 +212,23 @@ const List = {
       onRawWheel({ preventDefault() {}, deltaY });
       return true;
     });
+    // Firefox only
+    function onMozMousePixelScroll(e) {
+      if (inVirtual.value) {
+        e.preventDefault();
+      }
+    }
+    const removeEventListener = () => {
+      if (componentRef.current) {
+        componentRef.current.removeEventListener('wheel', onRawWheel);
+        componentRef.current.removeEventListener('DOMMouseScroll', onFireFoxScroll);
+        componentRef.current.removeEventListener('MozMousePixelScroll', onMozMousePixelScroll);
+      }
+    };
     watchEffect(() => {
       nextTick(() => {
         if (componentRef.current) {
-          // Firefox only
-          function onMozMousePixelScroll(e) {
-            if (inVirtual.value) {
-              e.preventDefault();
-            }
-          }
-          componentRef.current.removeEventListener('wheel', onRawWheel);
-          componentRef.current.removeEventListener('DOMMouseScroll', onFireFoxScroll);
-          componentRef.current.removeEventListener('MozMousePixelScroll', onMozMousePixelScroll);
+          removeEventListener();
           componentRef.current.addEventListener('wheel', onRawWheel);
           componentRef.current.addEventListener('DOMMouseScroll', onFireFoxScroll);
           componentRef.current.addEventListener('MozMousePixelScroll', onMozMousePixelScroll);
@@ -231,6 +236,10 @@ const List = {
       });
     });
 
+    onBeforeUnmount(() => {
+      removeEventListener();
+    });
+
     // ================================= Ref ==================================
     const scrollTo = useScrollTo(
       componentRef,

components/vc-virtual-list/ScrollBar.jsx

@@ -1,3 +1,4 @@
+import { reactive } from 'vue';
 import classNames from '../_util/classNames';
 import createRef from '../_util/createRef';
 import raf from '../_util/raf';
@@ -46,12 +47,12 @@ export default {
       scrollbarRef: createRef(),
       thumbRef: createRef(),
       visibleTimeout: null,
-      state: {
+      state: reactive({
         dragging: false,
         pageY: null,
         startTop: null,
         visible: false,
-      },
+      }),
     };
   },
   watch: {
@@ -79,7 +80,6 @@ export default {
 
       this.visibleTimeout = setTimeout(() => {
         this.state.visible = false;
-        this.$forceUpdate(); // why ?
       }, 2000);
     },