From dde2ff140d13e13d8275b48ebd955a14466c7a21 Mon Sep 17 00:00:00 2001 From: tangjinzhou <415800467@qq.com> Date: Sun, 12 Mar 2023 23:48:46 +0800 Subject: [PATCH] fix: token effect error --- .../_util/cssinjs/hooks/useGlobalCache.tsx | 53 ++++++++++--------- components/config-provider/index.tsx | 4 +- components/locale/index.tsx | 2 +- 3 files changed, 32 insertions(+), 27 deletions(-) diff --git a/components/_util/cssinjs/hooks/useGlobalCache.tsx b/components/_util/cssinjs/hooks/useGlobalCache.tsx index 2532d48d2..569ce171c 100644 --- a/components/_util/cssinjs/hooks/useGlobalCache.tsx +++ b/components/_util/cssinjs/hooks/useGlobalCache.tsx @@ -2,8 +2,7 @@ import { useStyleInject } from '../StyleContext'; import type { KeyType } from '../Cache'; import useHMR from './useHMR'; import type { ComputedRef, Ref } from 'vue'; -import { onBeforeUnmount, computed, watch } from 'vue'; -import eagerComputed from '../../eagerComputed'; +import { onBeforeUnmount, computed, watch, watchEffect, shallowRef } from 'vue'; export default function useClientCache( prefix: string, @@ -13,7 +12,10 @@ export default function useClientCache( ): ComputedRef { const styleContext = useStyleInject(); const fullPath = computed(() => [prefix, ...keyPath.value]); - const fullPathStr = eagerComputed(() => fullPath.value.join('_')); + const fullPathStr = shallowRef(''); + watchEffect(() => { + fullPathStr.value = fullPath.value.join('_'); + }); const HMRUpdate = useHMR(); const clearCache = (paths: typeof fullPath.value) => { styleContext.cache.update(paths, prevCache => { @@ -28,36 +30,37 @@ export default function useClientCache( return [times - 1, cache]; }); }; + watch( - () => fullPath.value.slice(), - (_, oldValue) => { - clearCache(oldValue); - }, - ); - // Create cache - watch( - fullPathStr, - () => { - styleContext.cache.update(fullPath.value, prevCache => { - const [times = 0, cache] = prevCache || []; + [fullPathStr, fullPath], + ([newStr], [oldStr, oldPath]) => { + if (newStr !== oldStr) { + if (oldPath) clearCache(oldPath); + // Create cache + styleContext.cache.update(fullPath.value, prevCache => { + const [times = 0, cache] = prevCache || []; - // HMR should always ignore cache since developer may change it - let tmpCache = cache; - if (process.env.NODE_ENV !== 'production' && cache && HMRUpdate) { - onCacheRemove?.(tmpCache, HMRUpdate); - tmpCache = null; - } + // HMR should always ignore cache since developer may change it + let tmpCache = cache; + if (process.env.NODE_ENV !== 'production' && cache && HMRUpdate) { + onCacheRemove?.(tmpCache, HMRUpdate); + tmpCache = null; + } + // console.log('create'); + const mergedCache = tmpCache || cacheFn(); - const mergedCache = tmpCache || cacheFn(); - - return [times + 1, mergedCache]; - }); + return [times + 1, mergedCache]; + }); + } }, { immediate: true }, ); + onBeforeUnmount(() => { clearCache(fullPath.value); }); - const val = computed(() => styleContext.cache.get(fullPath.value)![1]); + const val = computed(() => { + return styleContext.cache.get(fullPath.value)![1]; + }); return val; } diff --git a/components/config-provider/index.tsx b/components/config-provider/index.tsx index 3f9ae3b01..3ad1017b1 100644 --- a/components/config-provider/index.tsx +++ b/components/config-provider/index.tsx @@ -201,7 +201,9 @@ const ConfigProvider = defineComponent({ dropdownMatchSelectWidth, getPrefixCls, iconPrefixCls, - theme: mergedTheme, + theme: computed(() => { + return mergedTheme.value ?? parentContext.theme?.value; + }), renderEmpty: renderEmptyComponent, getTargetContainer, getPopupContainer, diff --git a/components/locale/index.tsx b/components/locale/index.tsx index 8a9b5e210..1c45e6ab6 100644 --- a/components/locale/index.tsx +++ b/components/locale/index.tsx @@ -42,7 +42,7 @@ export interface Locale { copied?: any; expand?: any; }; - QRCode: { + QRCode?: { expired?: string; refresh?: string; };