Bug Type: Component

Environment

• Vue Version: 3.2.47
• Element Plus Version: 2.3.0
• Browser / OS: Chrome 110.0.5481.177 / Mac OS 13.2
• Build Tool: Vite

Reproduction

Related Component

• el-menu
• el-sub-menu

Reproduction Link

Docs CN

Steps to reproduce

English：The following is the pseudocode of the loop submenu by encapsulating the menu component with tsx，When the mode attribute of the component is set to horizontal and ellipsis is set to true by default, changing the window size will cause the vue to throw an infinite loop warning, causing the browser to get stuck，Source code location that triggered the warning
中文：以下是用tsx封装菜单组件，循环子菜单的伪代码，当组件的mode属性设置为horizontal，ellipsis默认为true时，改变窗口大小会导致vue抛出无限循环警告，导致浏览器卡死,触发警告的源代码位置

function renderMenuItem(menu: Menu) {
      const {
        path,
        icon,
        name,
        children,
      } = menu
      const slots = {
        default: () => icon && <ElIcon><i className={`${icon}`}></i></ElIcon>,
        title: () => <span>{name}</span>,
      }

      if (children && children.length) {
        return (
          <ElSubMenu
            index={path}
            key={path}
            v-slots={{ title: () => [slots.default(), slots.title()] }}
          >
            {renderMenuList(children)}
          </ElSubMenu>
        )
      }
      else {
        return (
          <ElMenuItem
            key={path}
            index={path}
            router={path}
            v-slots={ slots }
            onClick={() => onClickMenu(menu)}
          >
          </ElMenuItem>
        )
      }
    }

    function renderMenuList(list: Menu[]) {
      return list.map(renderMenuItem)
    }

warning info:

runtime-core.esm-bundler.js:40 [Vue warn]: injection "Symbol(elForwardRef)" not found. 
  at <ElOnlyChild key=0 class="el-tooltip__trigger" aria-controls=undefined  ... > 
  at <ElFocusTrap trapped=false trap-on-focus-in=true focus-trap-el=undefined  ... > 
  at <ElPopperContent key=0 id="el-id-4015-31" ref_key="contentRef"  ... > 
  at <BaseTransition onAfterLeave=fn<onTransitionLeave> onBeforeEnter=fn<onBeforeEnter> onAfterEnter=fn<onAfterShow>  ... > 
  at <Transition name="el-zoom-in-left" onAfterLeave=fn<onTransitionLeave> onBeforeEnter=fn<onBeforeEnter>  ... > 
  at <ElTooltipContent ref_key="contentRef" ref=Ref< undefined > aria-label=undefined  ... > 
  at <ElPopper ref_key="popperRef" ref=Ref< undefined > role="tooltip" > 
  at <ElTooltip ref=Ref< null > visible=false effect="light"  ... > 
  at <ElSubMenu index="sub-menu-more" class="el-sub-menu__hide-arrow" > 
  at <ElMenu default-active="/system/menu" mode="horizontal" collapse=true > 
  at <LayoutAsideMenu collapse=true > 
  at <ElScrollbar style= {flex: '1'} > 
  at <LayoutAside> 
  at <ElContainer> 
  at <ElContainer h-screen="" direction="vertical" > 
  at <Default onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< Proxy {__v_skip: true} > > 
  at <RouterView> 
  at <ElConfigProvider size="small" locale= {name: 'zh-cn', el: {…}} >

The following information circulates indefinitely/以下信息无限循环

runtime-core.esm-bundler.js:40 [Vue warn]: Maximum recursive 
 updates exceeded. This means you have a reactive effect that is   
 mutating its own dependencies and thus recursively triggering   
 itself. Possible sources include component template, render   
 function, updated hook or watcher source function.

What is Expected?

Capable of normal operation
能够正常运行

What is actually happening?

Browser stuck
浏览器卡死

Additional comments

(empty)