Vuetify 3菜单组件mouseenter事件首次渲染失效问题求助

错误原因 #

你遇到的问题核心是事件绑定时机不对：

• 页面首次渲染时，你大概率是在DOM元素还没被渲染到页面的阶段（比如Vue组件的created钩子、纯JS里直接在<script>标签顶层执行绑定代码）就调用了document.querySelectorAll('.list')这类方法，此时根本查不到目标元素，自然绑定不上事件。
• 修改代码触发热更新后，组件重新挂载，此时DOM已经完全渲染完成，再执行绑定逻辑就能找到元素，事件也就正常工作了。纯HTML版本的问题也是同理——你写的绑定代码执行时，目标DOM还没加载完毕。

解决方案 #

方案1：用Vue原生指令绑定（推荐） #

放弃手动用原生JS绑定事件，直接在Vuetify组件的菜单项上用@mouseenter指令绑定事件，Vue会自动处理DOM渲染后的事件绑定，完全规避时机问题：

<template>
  <!-- 示例：给带list类的v-btn绑定mouseenter -->
  <v-btn class="list" @mouseenter="handleMouseEnter">菜单项</v-btn>
</template>

<script setup>
const handleMouseEnter = (e) => {
  // 你的事件逻辑
  console.log('鼠标进入', e.target)
}
</script>

方案2：原生JS绑定需确保DOM已就绪 #

如果一定要用原生JS绑定，必须在DOM完全渲染完成后执行绑定逻辑：

• 在Vue组件中，把绑定代码放在mounted钩子（组件挂载完成，DOM已生成）里：

<script setup>
import { onMounted } from 'vue'

onMounted(() => {
  // 此时DOM已渲染，能查到目标元素
  const listItems = document.querySelectorAll('.list')
  listItems.forEach(item => {
    item.addEventListener('mouseenter', (e) => {
      // 你的事件逻辑
      console.log('鼠标进入', e.target)
    })
  })
})
</script>

• 纯HTML版本则要把绑定代码放在DOMContentLoaded事件回调里：

<script>
document.addEventListener('DOMContentLoaded', () => {
  const listItems = document.querySelectorAll('.list')
  listItems.forEach(item => {
    item.addEventListener('mouseenter', (e) => {
      // 你的事件逻辑
    })
  })
})
</script>

额外提醒：如果菜单项是动态生成的（比如用v-for循环），方案1依然适用；如果用方案2，还需要在数据更新后重新绑定事件，或者使用事件委托（把事件绑定到父元素上，通过事件冒泡处理），避免动态新增的元素绑不上事件。

内容的提问来源于stack exchange，提问作者BIOHAZARD17