Vue 3 中的事件监听问题及解决方案

在 Vue 3 开发中，事件监听有时会遇到一些意想不到的问题，特别是在组件挂载时对 DOM 元素进行操作时。今天我们来探讨一个常见的问题——事件监听的时机问题，并提供一个具体的解决方案。问题描述假设我们有一个简单的列表组件，每个列表项需要在鼠标进入和离开时打印日志。以下是原始组件代码：template div div v-for="(value, index) in lines" ref="items" :key="index" { { value }} /div /div /template script setup lang="ts" import { Ref, ref, onMounted, onUnmounted, PropType } from 'vue'; const items: RefHTMLElement[] = ref([]); defineProps({ lines: { type: Array as PropTypestring[], default: () = [] }, }); const handleMouseEnter = () =