perf: update menu

Author: tangjinzhou

components/form/FormItem.tsx

@@ -1,4 +1,5 @@
-import { PropType, ExtractPropTypes, ComputedRef, watch } from 'vue';
+import type { PropType, ExtractPropTypes, ComputedRef } from 'vue';
+import { watch } from 'vue';
 import { defineComponent, computed, nextTick, ref, watchEffect, onBeforeUnmount } from 'vue';
 import cloneDeep from 'lodash-es/cloneDeep';
 import PropTypes from '../_util/vue-types';

components/menu/src/InlineSubMenuList.tsx

@@ -1,6 +1,7 @@
 import { computed, defineComponent, ref, watch } from 'vue';
 import Transition from '../../_util/transition';
 import { useInjectMenu, MenuContextProvider } from './hooks/useMenuContext';
+import type { MenuMode } from './interface';
 import SubMenuList from './SubMenuList';
 
 export default defineComponent({
@@ -12,7 +13,7 @@ export default defineComponent({
     keyPath: Array,
   },
   setup(props, { slots }) {
-    const fixedMode = computed(() => 'inline');
+    const fixedMode = computed<MenuMode>(() => 'inline');
     const { motion, mode, defaultMotions } = useInjectMenu();
     const sameModeRef = computed(() => mode.value === fixedMode.value);
     const destroy = ref(!sameModeRef.value);
@@ -43,12 +44,7 @@ export default defineComponent({
         return null;
       }
       return (
-        <MenuContextProvider
-          props={{
-            mode: fixedMode,
-            locked: !sameModeRef.value,
-          }}
-        >
+        <MenuContextProvider mode={fixedMode.value}>
           <Transition {...mergedMotion.value}>
             <SubMenuList
               v-show={mergedOpen.value}

components/menu/src/Menu.tsx

@@ -367,7 +367,7 @@ export default defineComponent({
       siderCollapsed,
       defaultMotions: computed(() => (isMounted.value ? defaultMotions : null)),
       motion: computed(() => (isMounted.value ? props.motion : null)),
-      overflowDisabled: computed(() => undefined),
+      overflowDisabled: ref(undefined),
       onOpenChange: onInternalOpenChange,
       onItemClick: onInternalClick,
       registerMenuInfo,
@@ -391,7 +391,7 @@ export default defineComponent({
               // Always wrap provider to avoid sub node re-mount
               <MenuContextProvider
                 key={child.key}
-                props={{ overflowDisabled: computed(() => index > lastVisibleIndex.value) }}
+                overflowDisabled={index > lastVisibleIndex.value}
               >
                 {child}
               </MenuContextProvider>

components/menu/src/SubMenu.tsx

@@ -268,12 +268,7 @@ export default defineComponent({
             onVisibleChange={onPopupVisibleChange}
             v-slots={{
               popup: ({ visible }) => (
-                <MenuContextProvider
-                  props={{
-                    mode: subMenuTriggerModeRef,
-                    isRootMenu: false,
-                  }}
-                >
+                <MenuContextProvider mode={subMenuTriggerModeRef.value} isRootMenu={false}>
                   <Transition {...mergedMotion.value}>
                     <SubMenuList v-show={visible} id={popupId} ref={popupRef}>
                       {slots.default?.()}
@@ -292,7 +287,7 @@ export default defineComponent({
         titleNode = <PopupTrigger>{titleNode}</PopupTrigger>;
       }
       return (
-        <MenuContextProvider props={{ mode: renderMode }}>
+        <MenuContextProvider mode={renderMode.value}>
           <Overflow.Item
             component="li"
             {...attrs}

components/menu/src/hooks/useMenuContext.ts

@@ -1,5 +1,7 @@
 import type { Key } from '../../../_util/type';
-import type { ComputedRef, CSSProperties, InjectionKey, Ref, UnwrapRef } from 'vue';
+import type { ComputedRef, CSSProperties, InjectionKey, PropType, Ref, UnwrapRef } from 'vue';
+import { toRef } from 'vue';
+import { watchEffect } from 'vue';
 import { defineComponent, inject, provide } from 'vue';
 import type {
   BuiltinPlacements,
@@ -31,8 +33,6 @@ export interface MenuContextProps {
   selectedSubMenuEventKeys: Ref<string[]>;
   rtl?: ComputedRef<boolean>;
 
-  locked?: Ref<boolean>;
-
   inlineCollapsed: Ref<boolean>;
   antdMenuTheme?: ComputedRef<MenuTheme>;
 
@@ -44,7 +44,7 @@ export interface MenuContextProps {
   // // Disabled
   disabled?: ComputedRef<boolean>;
   // // Used for overflow only. Prevent hidden node trigger open
-  overflowDisabled?: ComputedRef<boolean>;
+  overflowDisabled?: Ref<boolean>;
 
   // // Active
   activeKeys: Ref<Key[]>;
@@ -108,10 +108,25 @@ const MenuContextProvider = defineComponent({
   name: 'MenuContextProvider',
   inheritAttrs: false,
   props: {
-    props: Object,
+    mode: { type: String as PropType<MenuMode>, default: undefined },
+    overflowDisabled: { type: Boolean, default: undefined },
+    isRootMenu: { type: Boolean, default: undefined },
   },
   setup(props, { slots }) {
-    useProvideMenu({ ...useInjectMenu(), ...props.props });
+    const menuContext = useInjectMenu();
+    const newContext = { ...menuContext };
+    watchEffect(() => {
+      if (props.mode !== undefined) {
+        newContext.mode = toRef(props, 'mode');
+      }
+      if (props.isRootMenu !== undefined) {
+        newContext.isRootMenu = props.isRootMenu;
+      }
+      if (props.overflowDisabled !== undefined) {
+        newContext.overflowDisabled = toRef(props, 'overflowDisabled');
+      }
+    });
+    useProvideMenu(newContext);
     return () => slots.default?.();
   },
 });