From 1ed4923ea1e904d8a0f34fbf20093d5430bdb7e2 Mon Sep 17 00:00:00 2001
From: tangjinzhou <415800467@qq.com>
Date: Mon, 2 Aug 2021 08:52:36 +0800
Subject: [PATCH] perf: update menu

---
 components/menu/src/Menu.tsx                |  2 +-
 components/menu/src/PopupTrigger.tsx        |  2 +-
 components/menu/src/hooks/useMenuContext.ts | 28 ++++++++++-----------
 3 files changed, 15 insertions(+), 17 deletions(-)

diff --git a/components/menu/src/Menu.tsx b/components/menu/src/Menu.tsx
index 1ef223f62..58ccd6013 100644
--- a/components/menu/src/Menu.tsx
+++ b/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 () => {
diff --git a/components/menu/src/PopupTrigger.tsx b/components/menu/src/PopupTrigger.tsx
index 9d2af8cad..86d329b32 100644
--- a/components/menu/src/PopupTrigger.tsx
+++ b/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}
diff --git a/components/menu/src/hooks/useMenuContext.ts b/components/menu/src/hooks/useMenuContext.ts
index 68556c5a1..62d6a5828 100644
--- a/components/menu/src/hooks/useMenuContext.ts
+++ b/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?.();
   },