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

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,7 +128,10 @@ export function useEcharts(
     render();
   }
 
-  const stopSizeWatch = watch([width, height], ([newWidth, newHeight]) => {
+  const scope = effectScope();
+
+  scope.run(() => {
+    watch([width, height], ([newWidth, newHeight]) => {
       initialSize.width = newWidth;
       initialSize.height = newHeight;
       if (newWidth === 0 && newHeight === 0) {
@@ -144,7 +147,7 @@ export function useEcharts(
       }
     });
 
-  const stopOptionWatch = watch(
+    watch(
       options,
       newValue => {
         update(newValue);
@@ -152,18 +155,17 @@ export function useEcharts(
       { deep: true }
     );
 
-  const stopDarkModeWatch = watch(
+    watch(
       () => theme.darkMode,
       () => {
         updateTheme();
       }
     );
+  });
 
-  onUnmounted(() => {
+  onScopeDispose(() => {
     destroy();
-    stopSizeWatch();
+    scope.stop();
-    stopOptionWatch();
-    stopDarkModeWatch();
   });
 
   return {

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,

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,9 +12,11 @@ export default function subscribeThemeStore() {
   const osTheme = useOsTheme();
   const { width } = useElementSize(document.documentElement);
   const { addDarkClass, removeDarkClass } = handleCssDarkMode();
+  const scope = effectScope();
 
+  scope.run(() => {
     // 监听主题颜色
-  const stopThemeColor = watch(
+    watch(
       () => theme.themeColor,
       newValue => {
         localStg.set('themeColor', newValue);
@@ -23,7 +25,7 @@ export default function subscribeThemeStore() {
     );
 
     // 监听naiveUI themeOverrides
-  const stopThemeOverrides = watch(
+    watch(
       () => theme.naiveThemeOverrides,
       newValue => {
         if (newValue.common) {
@@ -34,7 +36,7 @@ export default function subscribeThemeStore() {
     );
 
     // 监听暗黑模式
-  const stopDarkMode = watch(
+    watch(
       () => theme.darkMode,
       newValue => {
         if (newValue) {
@@ -49,7 +51,7 @@ export default function subscribeThemeStore() {
     );
 
     // 监听操作系统主题模式
-  const stopOsTheme = watch(
+    watch(
       osTheme,
       newValue => {
         const isDark = newValue === 'dark';
@@ -59,20 +61,17 @@ export default function subscribeThemeStore() {
     );
 
     // 禁用横向滚动(页面切换时,过渡动画会产生水平方向的滚动条, 小于最小宽度时，不禁止)
-  const stopWidth = watch(width, newValue => {
+    watch(width, newValue => {
       if (newValue < theme.layout.minWidth) {
         document.documentElement.style.overflowX = 'auto';
       } else {
         document.documentElement.style.overflowX = 'hidden';
       }
     });
+  });
 
-  onUnmounted(() => {
+  onScopeDispose(() => {
-    stopThemeColor();
+    scope.stop();
-    stopThemeOverrides();
-    stopDarkMode();
-    stopOsTheme();
-    stopWidth();
   });
 }