本文解决 Vue 3 组合式 API 下因状态作用域错误导致的图片资源未实时切换问题：useTheme 钩子误将 ref 声明在函数内部，造成每次调用返回独立副本，破坏响应式共享状态。

本文解决 vue 3 组合式 api 下因状态作用域错误导致的图片资源未实时切换问题：`usetheme` 钩子误将 `ref` 声明在函数内部，造成每次调用返回独立副本，破坏响应式共享状态。

在 Vue 应用中实现昼夜主题切换时，背景色等样式能即时响应，但 <img :src="banner" alt="Vue 中主题切换时图片不响应式更新的解决方案" > 却需刷新页面才更新——这通常不是 DOM 渲染或路径问题，而是响应式状态未被正确共享所致。

根本原因在于 useTheme.js 的初始实现：

// ❌ 错误：每次调用 useTheme() 都创建新的 ref 实例
export default function useTheme() {
  const theme = ref(JSON.parse(localStorage.getItem('theme') || 'false'));
  // ...
}

由于 theme 被定义在函数作用域内，Home.vue 和 App.vue 中分别调用 useTheme() 会获得两个互不关联的 ref 实例。虽然 App.vue 修改了自身的 theme.value，但 Home.vue 中的 computed 依赖的是另一个 theme，因此无法触发重新计算，banner 值保持不变。

✅ 正确做法是将 ref 提升至模块顶层，确保所有组件共用同一响应式引用：

Element Plus UI Vue3

Element Plus Vue3 桌面组件库。在开发 Vue 3.x 页面时调用，使用 Element Plus 组件（如 el-button、el-input、el-form、el-table 等）。

下载

立即学习“前端免费学习笔记（深入）”；

// ✅ 正确：useTheme.js —— 全局单一响应式状态
import { ref, watchEffect } from 'vue';

// 在模块顶层声明，保证单例
const theme = ref(JSON.parse(localStorage.getItem('theme') || 'false'));

watchEffect(() => {
  localStorage.setItem('theme', String(theme.value));
});

export default function useTheme() {
  return { theme };
}

同时，Home.vue 中的逻辑已正确（使用 computed + theme.value），无需修改：

<script setup>
import { computed } from 'vue';
import { useTheme } from '@/composables/useTheme';
import DayTimeBanner from '@/assets/banner-city-daytime.png';
import NightTimeBanner from '@/assets/banner-city-nighttime.png';

const { theme } = useTheme();
const banner = computed(() => 
  theme.value ? NightTimeBanner : DayTimeBanner
);
</script>

<template>
  <img :src="banner" :alt="theme.value ? 'Nighttime Banner' : 'Daytime Banner'" />
</template>

⚠️ 注意事项：

• 不要重复调用 localStorage.setItem('theme', ...) 在组件内（如 App.vue 中的 toggleTheme），否则会与 watchEffect 冲突，引发冗余写入或竞态；
• 若需兼容服务端渲染（SSR），localStorage 访问应包裹在 onMounted 或 typeof window !== 'undefined' 判断中；
• 图片路径建议使用 import 方式（如示例），避免 Webpack/Vite 无法正确解析相对路径导致构建失败。

总结：Vue 组合式 API 中，自定义 Hook 的响应式数据必须声明于模块顶层，而非函数内部，才能实现跨组件状态共享。这是响应式系统正常工作的前提，也是区分“局部状态”与“全局状态”的关键设计原则。