refactor: 优化虚拟列表性能和滚动体验

Author: wanchun

.vscode/settings.json

@@ -12,10 +12,6 @@
     "[json]": {
         "editor.defaultFormatter": "esbenp.prettier-vscode"
     },
-    // md 文件按 prettier 规范格式化
-    "[md]": {
-        "editor.defaultFormatter": "esbenp.prettier-vscode"
-    },
     "prettier.printWidth": 180,
 
     // Enable eslint for all supported languages
@@ -24,6 +20,6 @@
         "javascriptreact",
         "typescript",
         "typescriptreact",
-        "vue",
+        "vue"
     ]
 }

components/virtual-list/listItem.ts

@@ -2,7 +2,7 @@
  * item component, we need to know their size change at any time
  */
 
-import { cloneVNode, computed, defineComponent, ref } from 'vue';
+import { cloneVNode, computed, defineComponent, onBeforeUnmount, ref } from 'vue';
 import useResize from '../_util/use/useResize';
 import { getFirstValidNode } from '../_util/vnode';
 import getElementFromVueInstance from '../_util/getElementFromVueInstance';
@@ -14,20 +14,51 @@ export const FVirtualListItem = defineComponent({
     props: itemProps,
     setup(props, { attrs }) {
         const itemRef = ref();
+        let lastReportedSize = 0;
+        let sizeCheckTimer: number | null = null;
 
-        // tell parent current size identify by unqiue key
+        // 优化的尺寸变化检测和上报
         const dispatchSizeChange = () => {
+            if (!itemRef.value) {
+                return;
+            }
+
             const shapeKey = props.horizontal ? 'offsetWidth' : 'offsetHeight';
-            const s = itemRef.value ? itemRef.value[shapeKey] : 0;
-            (attrs as any).onItemResized(props.uniqueKey, s);
+            const currentSize = itemRef.value[shapeKey] || 0;
+
+            // 只有当尺寸显著变化时才上报，避免频繁的微小变化
+            // 阈值可以根据实际情况调整，例如设置为2px
+            const sizeThreshold = 2;
+            if (Math.abs(currentSize - lastReportedSize) >= sizeThreshold) {
+                lastReportedSize = currentSize;
+                (attrs as any).onItemResized(props.uniqueKey, currentSize);
+            }
         };
 
+        // 防抖的尺寸检查，并确保在组件卸载时清除定时器
+        const debouncedSizeCheck = () => {
+            if (sizeCheckTimer) {
+                clearTimeout(sizeCheckTimer);
+            }
+            // 稍微增加延迟，减少高频触发，例如 30ms
+            sizeCheckTimer = setTimeout(dispatchSizeChange, 16) as any;
+        };
+
+        // 使用原有的useResize，但添加防抖
         useResize(
             itemRef,
-            dispatchSizeChange,
+            debouncedSizeCheck,
             computed(() => !props.observeResize),
         );
 
+        // 清理定时器
+        onBeforeUnmount(() => {
+            if (sizeCheckTimer) {
+                clearTimeout(sizeCheckTimer);
+                sizeCheckTimer = null;
+            }
+        });
+
         return {
             itemRef,
         };