使用vue3写一个鼠标悬停事件,要求:鼠标放上去的时候将图片换为另一个图片 图片的路径放在data中

好的，以下是使用Vue3写一个鼠标悬停事件的示例代码：

<template>
  <div>
    <img :src="imgSrc" @mouseover="changeImg" @mouseleave="restoreImg" />
  </div>
</template>

<script>
import { defineComponent, ref } from 'vue';

export default defineComponent({
  name: 'HoverImg',
  setup() {
    const imgSrc = ref('/path/to/origin/img.jpg');
    const hoverImgSrc = '/path/to/hover/img.jpg';

    const changeImg = () => {
      imgSrc.value = hoverImgSrc;
    };

    const restoreImg = () => {
      imgSrc.value = '/path/to/origin/img.jpg';
    };

    return {
      imgSrc,
      changeImg,
      restoreImg,
    };
  },
});
</script>

在上面的代码中，我们使用了Vue3的`defineComponent`和`ref`方法来定义一个名为`HoverImg`的组件，并且在`setup`函数中定义了两个变量`imgSrc`和`hoverImgSrc`，分别表示原始图片路径和鼠标悬停时显示的图片路径。同时，我们定义了两个函数`changeImg`和`restoreImg`，分别用于切换图片和还原图片。

在模板中，我们使用了`<img>`标签来显示图片，并且绑定了`src`属性为`imgSrc`变量的值，同时使用了`@mouseover`和`@mouseleave`事件监听器来调用`changeImg`和`restoreImg`函数，实现了鼠标悬停时切换图片的功能。

需要注意的是，我们在`imgSrc`变量和`changeImg`函数中使用了Vue3的`ref`方法，这是因为在Vue3中，所有响应式数据都需要使用`ref`或`reactive`方法进行包装后才能正常使用。