diff --git a/src/composables/echarts.ts b/src/composables/echarts.ts index 5a4c7e155..981016cf1 100644 --- 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 index 8a202ca24..2c1903db6 100644 --- 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 index 89cb821c2..4d6c8d369 100644 --- 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(); }); }