From 572ebc8f1af53bb5b3dfc0697443a7d941f61523 Mon Sep 17 00:00:00 2001
From: tanjinzhou <415800467@qq.com>
Date: Thu, 20 May 2021 18:17:49 +0800
Subject: [PATCH] refactor: menu

---
 components/menu/src/Menu.tsx | 81 ++++++++++++++++++++----------------
 examples/App.vue             |  2 +-
 2 files changed, 47 insertions(+), 36 deletions(-)

diff --git a/components/menu/src/Menu.tsx b/components/menu/src/Menu.tsx
index e836ae702..f04b016da 100644
--- a/components/menu/src/Menu.tsx
+++ b/components/menu/src/Menu.tsx
@@ -67,11 +67,11 @@ export default defineComponent({
       computed(() => undefined),
     );
     const inlineCollapsed = computed(() => {
-      const { inlineCollapsed } = props;
+      console.log('siderCollapsed.value', siderCollapsed.value);
       if (siderCollapsed.value !== undefined) {
         return siderCollapsed.value;
       }
-      return inlineCollapsed;
+      return props.inlineCollapsed;
     });
 
     const isMounted = ref(false);
@@ -164,7 +164,9 @@ export default defineComponent({
     watch(
       () => props.openKeys,
       (openKeys = mergedOpenKeys.value) => {
-        mergedOpenKeys.value = openKeys;
+        if (!shallowEqual(mergedOpenKeys.value, openKeys)) {
+          mergedOpenKeys.value = openKeys;
+        }
       },
       { immediate: true },
     );
@@ -177,46 +179,55 @@ export default defineComponent({
     const mergedMode = ref<MenuMode>('vertical');
     const mergedInlineCollapsed = ref(false);
 
-    const isInlineMode = computed(() => mergedMode.value === 'inline');
-
-    // >>>>> Cache & Reset open keys when inlineCollapsed changed
-    const inlineCacheOpenKeys = ref([]);
-
-    // Cache
     watchEffect(() => {
-      if (isInlineMode.value) {
-        inlineCacheOpenKeys.value = mergedOpenKeys.value;
+      if (props.mode === 'inline' && inlineCollapsed.value) {
+        mergedMode.value = 'vertical';
+        mergedInlineCollapsed.value = inlineCollapsed.value;
+      } else {
+        mergedMode.value = props.mode;
+        mergedInlineCollapsed.value = false;
       }
     });
 
+    const isInlineMode = computed(() => mergedMode.value === 'inline');
+
+    // >>>>> Cache & Reset open keys when inlineCollapsed changed
+    const inlineCacheOpenKeys = ref(mergedOpenKeys.value);
+
     const mountRef = ref(false);
 
-    // Restore
-    watch(isInlineMode, () => {
-      if (!mountRef.value) {
-        mountRef.value = true;
-        return;
-      }
+    // Cache
+    watch(
+      mergedOpenKeys,
+      () => {
+        if (isInlineMode.value) {
+          inlineCacheOpenKeys.value = mergedOpenKeys.value;
+        }
+      },
+      { immediate: true },
+    );
 
-      if (isInlineMode.value) {
-        mergedOpenKeys.value = inlineCacheOpenKeys.value;
-      } else {
-        const empty = [];
-        mergedOpenKeys.value = empty;
-        // Trigger open event in case its in control
-        emit('update:openKeys', empty);
-        emit('openChange', empty);
-      }
-    });
+    // Restore
+    watch(
+      isInlineMode,
+      () => {
+        if (!mountRef.value) {
+          mountRef.value = true;
+          return;
+        }
 
-    watchEffect(() => {
-      if (props.mode === 'inline' && inlineCollapsed.value) {
-        mergedMode.value = 'vertical';
-        mergedInlineCollapsed.value = inlineCollapsed.value;
-      }
-      mergedMode.value = props.mode;
-      mergedInlineCollapsed.value = false;
-    });
+        if (isInlineMode.value) {
+          mergedOpenKeys.value = inlineCacheOpenKeys.value;
+        } else {
+          const empty = [];
+          mergedOpenKeys.value = empty;
+          // Trigger open event in case its in control
+          emit('update:openKeys', empty);
+          emit('openChange', empty);
+        }
+      },
+      { immediate: true },
+    );
 
     const className = computed(() => {
       return {
diff --git a/examples/App.vue b/examples/App.vue
index 2eb2ef0d2..2a34b3910 100644
--- a/examples/App.vue
+++ b/examples/App.vue
@@ -89,7 +89,7 @@ export default defineComponent({
     );
     const toggleCollapsed = () => {
       state.collapsed = !state.collapsed;
-      state.openKeys = state.collapsed ? [] : state.preOpenKeys;
+      // state.openKeys = state.collapsed ? [] : state.preOpenKeys;
     };
 
     return {