perf: menu lazy render children #4812

Author: tangjinzhou

components/dropdown/demo/sub-menu.vue

@@ -26,11 +26,11 @@ The menu has multiple levels.
       <a-menu>
         <a-menu-item>1st menu item</a-menu-item>
         <a-menu-item>2nd menu item</a-menu-item>
-        <a-sub-menu key="test" title="sub menu">
+        <a-sub-menu key="sub1" title="sub menu">
           <a-menu-item>3rd menu item</a-menu-item>
           <a-menu-item>4th menu item</a-menu-item>
         </a-sub-menu>
-        <a-sub-menu title="disabled sub menu" disabled>
+        <a-sub-menu key="sub2" title="disabled sub menu" disabled>
           <a-menu-item>5d menu item</a-menu-item>
           <a-menu-item>6th menu item</a-menu-item>
         </a-sub-menu>

components/layout/__tests__/__snapshots__/demo.test.js.snap

@@ -55,7 +55,7 @@ describe('Menu', () => {
       { attachTo: 'body', sync: false },
     );
     await asyncExpect(() => {
-      expect($$('.ant-menu-submenu-selected').length).toBe(2);
+      expect($$('li.ant-menu-submenu-selected').length).toBe(1);
     });
   });
   it('should accept openKeys in mode horizontal', async () => {

components/menu/__tests__/__snapshots__/demo.test.js.snap

@@ -30,7 +30,7 @@ Horizontal top navigation menu.
       </template>
       Navigation Two
     </a-menu-item>
-    <a-sub-menu>
+    <a-sub-menu key="sub1">
       <template #icon>
         <setting-outlined />
       </template>

components/menu/__tests__/index.test.js

@@ -108,7 +108,7 @@ export default defineComponent({
 
     watch(
       () => state.openKeys,
-      (val, oldVal) => {
+      (_val, oldVal) => {
         state.preOpenKeys = oldVal;
       },
     );

components/menu/demo/horizontal.vue

@@ -21,8 +21,8 @@ Use the single file method to recursively generate menus.
       <MenuFoldOutlined v-else />
     </a-button>
     <a-menu
-      :default-selected-keys="['1']"
-      :default-open-keys="['2']"
+      v-model:openKeys="openKeys"
+      v-model:selectedKeys="selectedKeys"
       mode="inline"
       theme="dark"
       :inline-collapsed="collapsed"
@@ -119,6 +119,8 @@ export default defineComponent({
       list,
       collapsed,
       toggleCollapsed,
+      selectedKeys: ref(['1']),
+      openKeys: ref(['2']),
     };
   },
 });

components/menu/demo/inline-collapsed.vue

@@ -20,7 +20,7 @@ More layouts with navigation: [Layout](/components/layout).
 <template>
   <a-menu>
     <a-menu-item>Menu</a-menu-item>
-    <a-sub-menu title="SubMenu">
+    <a-sub-menu key="sub1" title="SubMenu">
       <a-menu-item>SubMenuItem</a-menu-item>
     </a-sub-menu>
   </a-menu>

components/menu/demo/template.vue

@@ -21,7 +21,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/3XZcjGpvK/Menu.svg
 <template>
   <a-menu>
     <a-menu-item>菜单项</a-menu-item>
-    <a-sub-menu title="子菜单">
+    <a-sub-menu key="sub1" title="子菜单">
       <a-menu-item>子菜单项</a-menu-item>
     </a-sub-menu>
   </a-menu>

components/menu/index.en-US.md

@@ -3,6 +3,7 @@ import type { ExtractPropTypes } from 'vue';
 import { computed, defineComponent } from 'vue';
 import PropTypes from '../../_util/vue-types';
 import { useInjectMenu } from './hooks/useMenuContext';
+import { useMeasure } from './hooks/useKeyPath';
 
 const menuItemGroupProps = {
   title: PropTypes.VNodeChild,
@@ -18,7 +19,9 @@ export default defineComponent({
   setup(props, { slots, attrs }) {
     const { prefixCls } = useInjectMenu();
     const groupPrefixCls = computed(() => `${prefixCls.value}-item-group`);
+    const isMeasure = useMeasure();
     return () => {
+      if (isMeasure) return slots.default?.();
       return (
         <li {...attrs} onClick={e => e.stopPropagation()} class={groupPrefixCls.value}>
           <div