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();
  });
 }