refactor(hooks): 重构hook函数取消监听方式

soybeanjs · Dec 10, 2022 · fd94886 · fd94886
1 parent 70aeefe
commit fd94886
Show file tree

Hide file tree

Showing 3 changed files with 91 additions and 88 deletions.
diff --git a/src/composables/echarts.ts b/src/composables/echarts.ts
@@ -1,4 +1,4 @@
-import { nextTick, onUnmounted, ref, watch } from 'vue';
+import { nextTick, effectScope, onScopeDispose, ref, watch } from 'vue';
 import type { ComputedRef, Ref } from 'vue';
 import * as echarts from 'echarts/core';
 import { BarChart, GaugeChart, LineChart, PictorialBarChart, PieChart, RadarChart, ScatterChart } from 'echarts/charts';
@@ -128,42 +128,44 @@ export function useEcharts(
     render();
   }
 
-  const stopSizeWatch = watch([width, height], ([newWidth, newHeight]) => {
-    initialSize.width = newWidth;
-    initialSize.height = newHeight;
-    if (newWidth === 0 && newHeight === 0) {
-      // 节点被删除 将chart置为空
-      chart = null;
-    }
-    if (canRender()) {
-      if (!isRendered()) {
-        render();
-      } else {
-        resize();
+  const scope = effectScope();
+
+  scope.run(() => {
+    watch([width, height], ([newWidth, newHeight]) => {
+      initialSize.width = newWidth;
+      initialSize.height = newHeight;
+      if (newWidth === 0 && newHeight === 0) {
+        // 节点被删除 将chart置为空
+        chart = null;
       }
-    }
+      if (canRender()) {
+        if (!isRendered()) {
+          render();
+        } else {
+          resize();
+        }
+      }
+    });
+
+    watch(
+      options,
+      newValue => {
+        update(newValue);
+      },
+      { deep: true }
+    );
+
+    watch(
+      () => theme.darkMode,
+      () => {
+        updateTheme();
+      }
+    );
   });
 
-  const stopOptionWatch = watch(
-    options,
-    newValue => {
-      update(newValue);
-    },
-    { deep: true }
-  );
-
-  const stopDarkModeWatch = watch(
-    () => theme.darkMode,
-    () => {
-      updateTheme();
-    }
-  );
-
-  onUnmounted(() => {
+  onScopeDispose(() => {
     destroy();
-    stopSizeWatch();
-    stopOptionWatch();
-    stopDarkModeWatch();
+    scope.stop();
   });
 
   return {

diff --git a/src/hooks/business/useCountDown.ts b/src/hooks/business/useCountDown.ts
@@ -1,4 +1,4 @@
-import { computed, ref } from 'vue';
+import { computed, onScopeDispose, ref } from 'vue';
 import { useBoolean } from '../common';
 
 /**
@@ -42,6 +42,8 @@ export default function useCountDown(second: number) {
     counts.value = 0;
   }
 
+  onScopeDispose(stop);
+
   return {
     counts,
     isCounting,

diff --git a/src/store/subscribe/theme.ts b/src/store/subscribe/theme.ts
@@ -1,4 +1,4 @@
-import { onUnmounted, watch } from 'vue';
+import { effectScope, onScopeDispose, watch } from 'vue';
 import { useOsTheme } from 'naive-ui';
 import type { GlobalThemeOverrides } from 'naive-ui';
 import { useElementSize } from '@vueuse/core';
@@ -12,67 +12,66 @@ export default function subscribeThemeStore() {
   const osTheme = useOsTheme();
   const { width } = useElementSize(document.documentElement);
   const { addDarkClass, removeDarkClass } = handleCssDarkMode();
+  const scope = effectScope();
 
-  // 监听主题颜色
-  const stopThemeColor = watch(
-    () => theme.themeColor,
-    newValue => {
-      localStg.set('themeColor', newValue);
-    },
-    { immediate: true }
-  );
+  scope.run(() => {
+    // 监听主题颜色
+    watch(
+      () => theme.themeColor,
+      newValue => {
+        localStg.set('themeColor', newValue);
+      },
+      { immediate: true }
+    );
 
-  // 监听naiveUI themeOverrides
-  const stopThemeOverrides = watch(
-    () => theme.naiveThemeOverrides,
-    newValue => {
-      if (newValue.common) {
-        addThemeCssVarsToHtml(newValue.common);
-      }
-    },
-    { immediate: true }
-  );
+    // 监听naiveUI themeOverrides
+    watch(
+      () => theme.naiveThemeOverrides,
+      newValue => {
+        if (newValue.common) {
+          addThemeCssVarsToHtml(newValue.common);
+        }
+      },
+      { immediate: true }
+    );
 
-  // 监听暗黑模式
-  const stopDarkMode = watch(
-    () => theme.darkMode,
-    newValue => {
-      if (newValue) {
-        addDarkClass();
-      } else {
-        removeDarkClass();
+    // 监听暗黑模式
+    watch(
+      () => theme.darkMode,
+      newValue => {
+        if (newValue) {
+          addDarkClass();
+        } else {
+          removeDarkClass();
+        }
+      },
+      {
+        immediate: true
       }
-    },
-    {
-      immediate: true
-    }
-  );
+    );
 
-  // 监听操作系统主题模式
-  const stopOsTheme = watch(
-    osTheme,
-    newValue => {
-      const isDark = newValue === 'dark';
-      theme.setAutoFollowSystemMode(isDark);
-    },
-    { immediate: true }
-  );
+    // 监听操作系统主题模式
+    watch(
+      osTheme,
+      newValue => {
+        const isDark = newValue === 'dark';
+        theme.setAutoFollowSystemMode(isDark);
+      },
+      { immediate: true }
+    );
 
-  // 禁用横向滚动(页面切换时,过渡动画会产生水平方向的滚动条, 小于最小宽度时，不禁止)
-  const stopWidth = watch(width, newValue => {
-    if (newValue < theme.layout.minWidth) {
-      document.documentElement.style.overflowX = 'auto';
-    } else {
-      document.documentElement.style.overflowX = 'hidden';
-    }
+    // 禁用横向滚动(页面切换时,过渡动画会产生水平方向的滚动条, 小于最小宽度时，不禁止)
+    watch(width, newValue => {
+      if (newValue < theme.layout.minWidth) {
+        document.documentElement.style.overflowX = 'auto';
+      } else {
+        document.documentElement.style.overflowX = 'hidden';
+      }
+    });
   });
 
-  onUnmounted(() => {
-    stopThemeColor();
-    stopThemeOverrides();
-    stopDarkMode();
-    stopOsTheme();
-    stopWidth();
+  onScopeDispose(() => {
+    scope.stop();
   });
 }