Vue 组合式函数中若在 useTheme 内重复声明 ref，会导致每次调用都创建独立响应式状态，破坏跨组件共享；修复方法是将 ref 提升至模块顶层，确保单例响应式引用。
vue 组合式函数中若在 `usetheme` 内重复声明 `ref`，会导致每次调用都创建独立响应式状态，破坏跨组件共享；修复方法是将 `ref` 提升至模块顶层，确保单例响应式引用。
在 Vue 3 的组合式 API 开发中，自定义 Hook（如 useTheme）的核心设计原则之一是状态单例化——即同一 Hook 在多个组件中调用时，必须共享同一份响应式数据，否则无法实现真正的跨组件响应式联动。
你遇到的问题（Banner 图片切换需刷新页面才生效，而 document.body.classList 却能即时响应）正是违反了这一原则的典型表现：
在原始 useTheme.js 中，const theme = ref(...) 被写在函数体内，每次调用 useTheme() 都会新建一个 ref 实例。这意味着：
-
App.vue中的theme与Home.vue中的theme不是同一个响应式引用； -
toggleTheme()修改的是App.vue所持有的theme，而Home.vue的computed banner监听的是它自己那一份（初始值来自 localStorage，但后续无更新）； - 因此
banner计算属性不会重新求值，图片自然不会切换。
✅ 正确做法是将 theme 声明提升至模块作用域顶层，使其成为单例响应式变量：
// composables/useTheme.js
import { ref, watchEffect } from 'vue'
// ✅ 模块级单例 ref —— 所有组件共享同一响应式源
const theme = ref(JSON.parse(localStorage.getItem('theme') || 'false'))
watchEffect(() => {
localStorage.setItem('theme', String(theme.value))
})
export default function useTheme() {
return { theme }
}
同时，建议统一数据序列化方式，避免 String() 与 JSON.stringify() 混用导致类型不一致（如 String(true) === "true"，但 JSON.stringify(true) === "true" 表面相同，实际 JSON.parse("true") 可还原为布尔值，而 JSON.parse("false") 同理；但若误存为 "true" 字符串再 JSON.parse 会报错）。推荐全程使用 JSON 方案：
// 初始化时
const theme = ref(
JSON.parse(localStorage.getItem('theme') || 'false')
)
// watchEffect 中同步
watchEffect(() => {
localStorage.setItem('theme', JSON.stringify(theme.value))
})
在组件中使用时保持简洁：
Element Plus Vue3 桌面组件库。在开发 Vue 3.x 页面时调用，使用 Element Plus 组件（如 el-button、el-input、el-form、el-table 等）。
<!-- Home.vue -->
<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>
@@##@@
</template>
⚠️ 注意事项：
- 不要在
useTheme函数内创建任何响应式状态（如ref、reactive），所有共享状态必须置于模块顶层； - 若需支持 SSR，需增加客户端检查（如
if (typeof window !== 'undefined')），但本例中localStorage天然仅限客户端，无需额外处理； -
watchEffect已自动追踪theme.value，无需手动监听，且会立即执行一次以同步初始 localStorage 值。
通过以上调整，theme.value 的变更将被所有依赖它的 computed 属性（包括 banner）精准捕获，图片即可实现零延迟动态切换。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
