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: Ref<HTMLElement[]> = ref([]); defineProps({ lines: { type: Array as PropType<string[]>, default: () => [] }, }); const handleMouseEnter = () =&