diff --git a/components/_util/cssinjs/Cache.ts b/components/_util/cssinjs/Cache.ts
index 61a583626..007e4a867 100644
--- a/components/_util/cssinjs/Cache.ts
+++ b/components/_util/cssinjs/Cache.ts
@@ -5,12 +5,12 @@ class Entity {
   /** @private Internal cache map. Do not access this directly */
   cache = new Map<string, ValueType>();
 
-  get(keys: KeyType[]): ValueType | null {
-    return this.cache.get(keys.join('%')) || null;
+  get(keys: KeyType[] | string): ValueType | null {
+    return this.cache.get(Array.isArray(keys) ? keys.join('%') : keys) || null;
   }
 
-  update(keys: KeyType[], valueFn: (origin: ValueType | null) => ValueType | null) {
-    const path = keys.join('%');
+  update(keys: KeyType[] | string, valueFn: (origin: ValueType | null) => ValueType | null) {
+    const path = Array.isArray(keys) ? keys.join('%') : keys;
     const prevValue = this.cache.get(path)!;
     const nextValue = valueFn(prevValue);
 
diff --git a/components/_util/cssinjs/hooks/useGlobalCache.tsx b/components/_util/cssinjs/hooks/useGlobalCache.tsx
index 569ce171c..141d30b7a 100644
--- a/components/_util/cssinjs/hooks/useGlobalCache.tsx
+++ b/components/_util/cssinjs/hooks/useGlobalCache.tsx
@@ -1,27 +1,25 @@
 import { useStyleInject } from '../StyleContext';
 import type { KeyType } from '../Cache';
 import useHMR from './useHMR';
-import type { ComputedRef, Ref } from 'vue';
-import { onBeforeUnmount, computed, watch, watchEffect, shallowRef } from 'vue';
-
+import type { ShallowRef, Ref } from 'vue';
+import { onBeforeUnmount, watch, watchEffect, shallowRef } from 'vue';
 export default function useClientCache<CacheType>(
   prefix: string,
   keyPath: Ref<KeyType[]>,
   cacheFn: () => CacheType,
   onCacheRemove?: (cache: CacheType, fromHMR: boolean) => void,
-): ComputedRef<CacheType> {
+): ShallowRef<CacheType> {
   const styleContext = useStyleInject();
-  const fullPath = computed(() => [prefix, ...keyPath.value]);
   const fullPathStr = shallowRef('');
+  const res = shallowRef<CacheType>();
   watchEffect(() => {
-    fullPathStr.value = fullPath.value.join('_');
+    fullPathStr.value = [prefix, ...keyPath.value].join('%');
   });
   const HMRUpdate = useHMR();
-  const clearCache = (paths: typeof fullPath.value) => {
-    styleContext.cache.update(paths, prevCache => {
+  const clearCache = (pathStr: string) => {
+    styleContext.cache.update(pathStr, prevCache => {
       const [times = 0, cache] = prevCache || [];
       const nextCount = times - 1;
-
       if (nextCount === 0) {
         onCacheRemove?.(cache, false);
         return null;
@@ -32,35 +30,29 @@ export default function useClientCache<CacheType>(
   };
 
   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 || [];
+    fullPathStr,
+    (newStr, oldStr) => {
+      if (oldStr) clearCache(oldStr);
+      // Create cache
+      styleContext.cache.update(newStr, 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;
-          }
-          // console.log('create');
-          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;
+        }
+        const mergedCache = tmpCache || cacheFn();
 
-          return [times + 1, mergedCache];
-        });
-      }
+        return [times + 1, mergedCache];
+      });
+      res.value = styleContext.cache.get(fullPathStr.value)![1];
     },
     { immediate: true },
   );
-
   onBeforeUnmount(() => {
-    clearCache(fullPath.value);
+    clearCache(fullPathStr.value);
   });
-  const val = computed(() => {
-    return styleContext.cache.get(fullPath.value)![1];
-  });
-  return val;
+  return res;
 }