fix: menu not update

components/menu/src/Menu.tsx

@@ -8,7 +8,6 @@ import {
   inject,
   watchEffect,
   watch,
-  reactive,
   onMounted,
   unref,
   UnwrapRef,
@@ -73,7 +72,7 @@ export default defineComponent({
   ],
   setup(props, { slots, emit }) {
     const { prefixCls, direction } = useConfigInject('menu', props);
-    const store = reactive<Record<string, StoreMenuInfo>>({});
+    const store = ref<Record<string, StoreMenuInfo>>({});
     const siderCollapsed = inject(SiderCollapsedKey, ref(undefined));
     const inlineCollapsed = computed(() => {
       if (siderCollapsed.value !== undefined) {
@@ -107,7 +106,7 @@ export default defineComponent({
       store,
       () => {
         const newKeyMapStore = {};
-        for (const [, menuInfo] of Object.entries(store)) {
+        for (const menuInfo of Object.values(store.value)) {
           newKeyMapStore[menuInfo.key] = menuInfo;
         }
         keyMapStore.value = newKeyMapStore;
@@ -300,8 +299,9 @@ export default defineComponent({
 
     const getChildrenKeys = (eventKeys: string[] = []): Key[] => {
       const keys = [];
+      const storeValue = store.value;
       eventKeys.forEach(eventKey => {
-        const { key, childrenEventKeys } = store[eventKey];
+        const { key, childrenEventKeys } = storeValue[eventKey];
         keys.push(key, ...getChildrenKeys(childrenEventKeys));
       });
       return keys;
@@ -317,7 +317,7 @@ export default defineComponent({
     };
 
     const onInternalOpenChange = (eventKey: Key, open: boolean) => {
-      const { key, childrenEventKeys } = store[eventKey];
+      const { key, childrenEventKeys } = store.value[eventKey];
       let newOpenKeys = mergedOpenKeys.value.filter(k => k !== key);
 
       if (open) {
@@ -334,10 +334,11 @@ export default defineComponent({
     };
 
     const registerMenuInfo = (key: string, info: StoreMenuInfo) => {
-      store[key] = info as any;
+      store.value = { ...store.value, [key]: info as any };
     };
     const unRegisterMenuInfo = (key: string) => {
-      delete store[key];
+      delete store.value[key];
+      store.value = { ...store.value };
     };
 
     useProvideMenu({
@@ -370,8 +371,9 @@ export default defineComponent({
       isRootMenu: true,
     });
     return () => {
+      // data-hack-store-update 初步判断是 vue bug，先用hack方式
       return (
-        <ul class={className.value} tabindex="0">
+        <ul data-hack-store-update={store.value} class={className.value} tabindex="0">
           {slots.default?.()}
         </ul>
       );

components/menu/src/PopupTrigger.tsx

@@ -89,7 +89,7 @@ export default defineComponent({
           mouseEnterDelay={subMenuOpenDelay.value}
           mouseLeaveDelay={subMenuCloseDelay.value}
           onPopupVisibleChange={onVisibleChange}
-          // forceRender={forceSubMenuRender}
+          forceRender={true}
           v-slots={{
             popup: () => {
               return slots.popup?.({ visible: innerVisible.value });

components/menu/src/SubMenu.tsx

@@ -44,9 +44,13 @@ export default defineComponent({
     useProvideFirstLevel(false);
 
     const instance = getCurrentInstance();
-    const key = instance.vnode.key;
+    const key =
+      instance.vnode.key !== null ? instance.vnode.key : `sub_menu_${++indexGuid}_$$_not_set_key`;
 
-    const eventKey = `sub_menu_${++indexGuid}_$$_${key}`;
+    const eventKey =
+      instance.vnode.key !== null
+        ? `sub_menu_${++indexGuid}_$$_${instance.vnode.key}`
+        : (key as string);
     const { parentEventKeys, parentInfo, parentKeys } = useInjectKeyPath();
     const keysPath = computed(() => [...parentKeys.value, key]);
     const eventKeysPath = computed(() => [...parentEventKeys.value, eventKey]);

components/menu/src/hooks/useMenuContext.ts

@@ -29,7 +29,7 @@ export interface StoreMenuInfo {
 export interface MenuContextProps {
   isRootMenu: boolean;
 
-  store: UnwrapRef<Record<string, StoreMenuInfo>>;
+  store: Ref<Record<string, UnwrapRef<StoreMenuInfo>>>;
   registerMenuInfo: (key: string, info: StoreMenuInfo) => void;
   unRegisterMenuInfo: (key: string) => void;
   prefixCls: ComputedRef<string>;