fix: token effect error

Author: tangjinzhou

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<CacheType>(
   prefix: string,
@@ -13,7 +12,10 @@ export default function useClientCache<CacheType>(
 ): ComputedRef<CacheType> {
   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<CacheType>(
       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 || [];
 
-        // 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;
-        }
+  watch(
+    [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 || [];
 
-        const mergedCache = tmpCache || cacheFn();
+          // 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();
 
-        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;
 }

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,

components/locale/index.tsx

@@ -42,7 +42,7 @@ export interface Locale {
     copied?: any;
     expand?: any;
   };
-  QRCode: {
+  QRCode?: {
     expired?: string;
     refresh?: string;
   };