computed不直接生成样式，而是派生类名或data-theme属性值以激活CSS变量；核心是用响应式状态控制开关，由CSS完成颜色等变量的实际派生与应用。
在 Vue 3 中，computed 本身不直接“实现”深色/浅色模式的样式变量派生，而是配合 CSS 变量（Custom Properties）和响应式状态，**动态决定哪些 CSS 变量值该被应用**。真正承担样式派生的是 CSS 层级逻辑（如 :root 与 .dark 类），而 computed 的作用是：精准控制类名、属性或内联样式，让 CSS 变量系统按需生效。
核心思路：computed 控制“开关”，CSS 负责“派生”
你不需要用 computed 去拼接颜色字符串或生成整套样式对象——那既低效又难维护。正确做法是：
- 把所有主题相关颜色、间距、阴影等定义为 CSS 变量（例如
--bg、--text） - 用一个响应式状态（如
isDark）表示当前模式 - 用
computed派生出应挂载到<html>上的类名或data-theme值 - CSS 利用该类名或属性，重置对应变量值 —— 这才是真正的“派生”
具体怎么写 computed？两个典型场景
场景一：派生 class 名（推荐）
适用于基于 .dark 类切换的方案（如 VueUse 的 useDark 或手动管理）：
立即学习“前端免费学习笔记（深入）”；
const isDark = ref(true) // 来自 pinia / localStorage / matchMedia const themeClass = computed(() => isDark.value ? 'dark' : '')
然后在 <App> 根组件中绑定：
<div :class="themeClass"></div>
再配合 CSS：
:root {
--bg: #fff;
--text: #111;
}
.dark {
--bg: #121212;
--text: #e0e0e0;
}
body {
background: var(--bg);
color: var(--text);
}
场景二：派生 data-theme 属性值
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
适用于 Element Plus 或某些 UI 库要求 data-theme="dark" 的情况：
const themeMode = computed(() => isDark.value ? 'dark' : 'light')
在 main.js 或 App.vue 的 onMounted 中设置：
onMounted(() => {
document.documentElement.setAttribute('data-theme', themeMode.value)
})
并监听变化（可配合 watch）：
watch(themeMode, (newVal) => {
document.documentElement.setAttribute('data-theme', newVal)
})
CSS 写法对应为：
:root { --bg: #fff; }
[data-theme="dark"] { --bg: #1a1a1a; }
为什么不用 computed 直接返回颜色值？
看似直观，但有明显缺陷：
- 无法被 CSS 其他地方复用（比如伪元素、媒体查询、动画关键帧里都用不了）
- 丢失 CSS 级联优势（无法被子元素继承或覆盖）
- 失去过渡动画支持（
transition: background-color对 JS 返回的颜色无效） - 绕过浏览器原生优化，性能不如纯 CSS 变量切换
所以，computed 的职责是“决策”，不是“生成样式”。它应轻量、语义清晰，只输出可被 DOM 或 CSS 消费的标识（类名、属性值、布尔标记）。
进阶：computed 配合 prefers-color-scheme 自动推断
若想默认跟随系统，可用 computed 封装判断逻辑：
const systemPrefersDark = computed(() =>
window.matchMedia?.('(prefers-color-scheme: dark)').matches ?? false
)
const effectiveTheme = computed(() => {
if (userPreference.value === 'auto') return systemPrefersDark.value
return userPreference.value === 'dark'
})
这样，effectiveTheme 就是最终生效的布尔值，可直接用于 themeClass 或 data-theme 的派生，逻辑清晰且可测试。
