Skip to content

Commit

Permalink
Merge pull request #163 from yanbowe/main
Browse files Browse the repository at this point in the history
refactor(hooks): 重构hook函数取消监听方式
  • Loading branch information
honghuangdc authored Dec 11, 2022
2 parents 70aeefe + fd94886 commit beb705f
Show file tree
Hide file tree
Showing 3 changed files with 91 additions and 88 deletions.
68 changes: 35 additions & 33 deletions src/composables/echarts.ts
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -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 {
Expand Down
4 changes: 3 additions & 1 deletion src/hooks/business/useCountDown.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { computed, ref } from 'vue';
import { computed, onScopeDispose, ref } from 'vue';
import { useBoolean } from '../common';

/**
Expand Down Expand Up @@ -42,6 +42,8 @@ export default function useCountDown(second: number) {
counts.value = 0;
}

onScopeDispose(stop);

return {
counts,
isCounting,
Expand Down
107 changes: 53 additions & 54 deletions src/store/subscribe/theme.ts
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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();
});
}

Expand Down

1 comment on commit beb705f

@vercel
Copy link

@vercel vercel bot commented on beb705f Dec 11, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please sign in to comment.