perf: update menu

Author: tangjinzhou

components/menu/src/Menu.tsx

@@ -373,7 +373,7 @@ export default defineComponent({
       registerMenuInfo,
       unRegisterMenuInfo,
       selectedSubMenuEventKeys,
-      isRootMenu: true,
+      isRootMenu: ref(true),
       expandIcon: props.expandIcon || slots.expandIcon,
     });
     return () => {

components/menu/src/PopupTrigger.tsx

@@ -80,7 +80,7 @@ export default defineComponent({
           )}
           stretch={mode === 'horizontal' ? 'minWidth' : null}
           getPopupContainer={
-            isRootMenu ? getPopupContainer.value : triggerNode => triggerNode.parentNode
+            isRootMenu.value ? getPopupContainer.value : triggerNode => triggerNode.parentNode
           }
           builtinPlacements={placement.value}
           popupPlacement={popupPlacement.value}

components/menu/src/hooks/useMenuContext.ts

@@ -1,8 +1,6 @@
 import type { Key } from '../../../_util/type';
 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 { defineComponent, inject, provide, toRef } from 'vue';
 import type {
   BuiltinPlacements,
   MenuClickEventHandler,
@@ -21,7 +19,7 @@ export interface StoreMenuInfo {
   parentKeys: ComputedRef<Key[]>;
 }
 export interface MenuContextProps {
-  isRootMenu: boolean;
+  isRootMenu: Ref<boolean>;
 
   store: Ref<Record<string, UnwrapRef<StoreMenuInfo>>>;
   registerMenuInfo: (key: string, info: StoreMenuInfo) => void;
@@ -115,17 +113,17 @@ const MenuContextProvider = defineComponent({
   setup(props, { slots }) {
     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');
-      }
-    });
+    // 确保传入的属性不会动态增删
+    // 不需要 watch 变化
+    if (props.mode !== undefined) {
+      newContext.mode = toRef(props, 'mode');
+    }
+    if (props.isRootMenu !== undefined) {
+      newContext.isRootMenu = toRef(props, 'isRootMenu');
+    }
+    if (props.overflowDisabled !== undefined) {
+      newContext.overflowDisabled = toRef(props, 'overflowDisabled');
+    }
     useProvideMenu(newContext);
     return () => slots.default?.();
   },