ref无法自动保持暗黑模式状态，需组合localstorage持久化、系统偏好监听及dom class切换才能实现刷新不丢、开机即对；usestorage可简化持久化，usepreferreddark配合usestorage可实现用户选择优先、系统偏好兜底的智能逻辑。
直接用 ref 无法自动保持暗黑模式状态——它只是个响应式基础容器，不带持久化或系统偏好感知能力。真正要“保持”，得靠组合逻辑：ref 负责响应式驱动，再配合 localStorage 读写 + 系统偏好监听，才能做到刷新不丢、开机即对。
手动用 ref + localStorage 持久化
这是最轻量、可控性最强的方式，适合不想引入额外依赖的项目：
- 页面加载时，先从
localStorage读取上次保存的值（如'dark'或'light'），作为ref的初始值；没有则 fallback 到系统偏好（window.matchMedia('(prefers-color-scheme: dark)').matches） - 每次切换时，除了更新
ref.value，还要同步写入localStorage - 同时主动给
元素添加/移除darkclass，触发 CSS 变量生效
用 useStorage 替代 ref（推荐）
useStorage 是 VueUse 提供的增强版“带存储的 ref”，一行代码就替代了手动读写 localStorage 的逻辑：
vue-composition-api-best-practices
Vue 3 组合式 API 与
热门下载
相关下载
精品课程
相关推荐
/
热门推荐
/
最新课程
最新文章