Преглед изворни кода

perf(base-L10): Adaptive resize 监听抽为稳定引用只注册一次,修复监听累积与移除失配

86132 пре 1 недеља
родитељ
комит
e4914c17c6
1 измењених фајлова са 14 додато и 8 уклоњено
  1. 14 8
      src/components/Container/src/Adaptive.vue

+ 14 - 8
src/components/Container/src/Adaptive.vue

@@ -101,12 +101,14 @@
         const rem = wW * whdef; // 以默认比例值乘以当前窗口宽度,得到该宽度下的相应FONT-SIZE值
         // document.documentElement.style.fontSize = rem + 'px';
         document.documentElement.style.fontSize = rem + 'px';
-        window.addEventListener('resize', function () {
-          const whdef = 100 / currentWidth; // 表示1920的设计图,使用100PX的默认值
-          const wW = window.innerWidth; // 当前窗口的宽度
-          const rem = wW * whdef; // 以默认比例值乘以当前窗口宽度,得到该宽度下的相应FONT-SIZE值
-          document.documentElement.style.fontSize = rem + 'px';
-        });
+      };
+      // [perf-base-v1] rem 计算的 resize 监听抽为稳定引用、仅注册一次;
+      // 原实现位于 cssSize 内且为匿名函数,onResize 每次触发都新增一个监听,造成监听无限累积
+      const onCssSizeResize = () => {
+        const whdef = 100 / document.body.clientWidth; // 表示1920的设计图,使用100PX的默认值
+        const wW = window.innerWidth; // 当前窗口的宽度
+        const rem = wW * whdef; // 以默认比例值乘以当前窗口宽度,得到该宽度下的相应FONT-SIZE值
+        document.documentElement.style.fontSize = rem + 'px';
       };
 
       //重置缩放比例
@@ -138,6 +140,8 @@
         }
       };
       //
+      // [perf-base-v1] 持有 debounce 包装后的引用,卸载时才能移除同一个函数(原移除的是 onResize 本体,与注册的包装函数不匹配)
+      const debouncedOnResize = debounce(100, onResize);
       onMounted(async () => {
         ready.value = false;
         await initSize();
@@ -145,13 +149,15 @@
         updateScale();
         setRem();
         cssSize();
-        window.addEventListener('resize', debounce(100, onResize));
+        window.addEventListener('resize', debouncedOnResize);
+        window.addEventListener('resize', onCssSizeResize);
         // initMutationObserver();
         ready.value = true;
       });
 
       onUnmounted(() => {
-        window.removeEventListener('resize', onResize);
+        window.removeEventListener('resize', debouncedOnResize);
+        window.removeEventListener('resize', onCssSizeResize);
         // removeMutationObserver();
       });