Vue3 script setup实现图片鼠标悬停切换失效，求解决方案

问题根源 #

你改成Script Setup后功能失效，大概率是没把curlogo声明为响应式变量——选项式API的data里的变量默认是响应式的，但Script Setup里普通变量不具备响应式，改了值也不会触发视图更新。

正确实现代码 #

模板部分（和你原来的一致）

<template>
  <nav>
    <router-link to="/">
      <img :src="curlogo" @mouseover="handleMouseOver" @mouseleave="handleMouseLeave" alt="logo">
    </router-link>
  </nav>
</template>

Script Setup部分

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

// 方式1：用require引入图片
const logo = require('@/assets/logo.png')
const logoHover = require('@/assets/logo-hover.png')

// 必须用ref声明响应式变量，初始值设为默认logo
const curlogo = ref(logo)

// 鼠标悬停事件
const handleMouseOver = () => {
  curlogo.value = logoHover
}

// 鼠标离开事件
const handleMouseLeave = () => {
  curlogo.value = logo
}
</script>

也可以用import方式引入图片：

<script setup>
import { ref } from 'vue'
import logo from '@/assets/logo.png'
import logoHover from '@/assets/logo-hover.png'

const curlogo = ref(logo)

const handleMouseOver = () => {
  curlogo.value = logoHover
}

const handleMouseLeave = () => {
  curlogo.value = logo
}
</script>

关键注意点 #

• 一定要用ref包裹curlogo：Script Setup里只有用ref/reactive声明的变量才是响应式的，修改curlogo.value时会自动触发视图更新。
• 图片引入方式两种都可以：require和import都能正确解析Vue项目中的静态资源，选你习惯的就行。
• 事件处理函数直接定义：不用像选项式那样放到methods里，Script Setup里直接声明函数就能在模板里调用。

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